Yawz Yawz - 5 months ago 9
HTML Question

How to fill the anchor element's height to 100% in html?

I have created a top bar that have

height: 50px
, then an anchor element inside it, the anchor element with it's padding supposed to be exact as the top bar height.

Testing the code in major browsers, Firefox has given the exact pixels height of top bar to anchor element, but in Chrome and IE, it have -1px result.
Fiddle Here

HTML:

<div > <a href="">Text Here</a> </div>


CSS:

div {
width: auto;
height: 50px;
background-color: #333;
}
a {
padding: 10px;
display: inline-block;
font-size: 24px; /* Adjusting this would affect element block size */
color: white;
font-family:'Bebas Neue';
background-color: #777;
}
a:hover { background-color: green; }


How could I fill the dimensions of the
<a>
anchor element up to the div's height?

Answer

As no one seems to have shown you the box-sizing css property: Add the following to your <a>

height:100%;
box-sizing:border-box;

EDIT:

  • For support on Mozilla Firefox: Use -moz- suffix.
  • To vertically align the content: Use display table-cell on the <a> element and display: table on its parent.

Fiddle Here

Comments