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 to convert Xpath to CSS

    How to override css img properties?

    How I add a CSS class to first element of an array in PHP?

    How do I evenly space these links within my navbar div?

    How can I split a text in 2 color vertically?

    How to vertically center text span in fixed position div?

    How to make website change its layout of image/text when the browser dimensions are changed?

    How to detect CSS inheritance source?

    How to prevent fixed positioned element overlapping others elements in css?

    CSS- How to align background image over bottom border line? Jsfiddle included

    How can I position a form with controls over a Google Map?

    How to create a custom scrollbar on a div (Facebook style)

    How to check if Html element has a background-image css property in WebBrowser control C#

    How to change css elements in HAML dependent on what page is calling for the content?

    How to hide the div on click through animation css

    How to stretch background image of a table cell with CSS?

    How to achieve disorganised bubble layout with html css?

    What is cufon and canvas and how to overwrite them

    How to add CSS style to focused anchor in HTML

    Css: How to format and remove outlining borders of table on left and right side?

    How can i change or remove title and page address?

    how do I center this image, without touching the HTML

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How to give Internet Explorer different CSS lines?

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    CSS and JS: How to Inflate the Size of a Tile In Grid

    How to link css to html in an express project?

    How to animate searchbox length from focusing on the textbox class CSS3?

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    Background-Image does not show properly on IE8