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


Tags: html,css

Problem :

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?



Solution :

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:

  • To vertically align the content: Use display table-cell on the <a> element and display: table on its parent.

div {
  width: auto;
  height: 100px;
  background-color: #333;
}
a {
  padding: 10px;
  display: table;
  font-size: 24px;
  color: white;
  font-family: 'Bebas Neue';
  background-color: #777;
  height: 100%;
  box-sizing: border-box;
}
a > span {
  display: table-cell;
  vertical-align: middle;
}
a:hover {
  background-color: green;
}
<div>
  <a href=""><span>Text Here</span></a> 
</div>

Fiddle Here


    CSS Howto..

    How can I overlay an image in a fluid layout (zurb foundation)

    How to make a white square around my form fields?

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    How to have two css animations in one tag

    How about taking out Bootstrap style? [closed]

    How to create javascript or css fadeInDown on mouseover?

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    How to add Active states and icons in wordpress wp_nav_menu()

    jquery mobile data-filter css styling--how to?

    jQuery slideDown() moves everything below downwards. How to prevent this?

    How can a directory/folder name affect page rendering?

    How to expand link on hoover? Add “<” “>” symbols around link?

    CSS: Hover in one DIV, how to display information from another DIV?

    How to resize an image in pure HTML/CSS while keeping its proportions?

    Is there a limit to how deep an HTML document or CSS tree can be?

    How to detect redraw rate (fps) of a css animation?

    How to make HTML design of a website extensible, reusable and flexible?

    How to increase the gap between text and underlining on my navbar links

    How can I give a child element of one parent a higher z-index than another parent?

    Dropdown menu. make it show onclick and not onmouseover

    How to link a css file with the Slim templating engine?

    How to negate conjunction of two attributes in CSS selector

    HTML – Show menu on hover

    How can I increase input text elements' width via CSS?

    How to center three DIVS with other HTML tags inside one parent DIV [duplicate]

    How to make div box actually touching the side of the browser as mine has a gap?

    how can i connect my css to my JSP files stored in the WEB-INF folder? Websphere/JSP

    How to vertically align div containers with CSS?

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    how to use bootstrap's modal dialog only, instead of the whole bootstrap.css to aviod conflicting with my own css