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


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


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>



  • 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;
  <a href=""><span>Text Here</span></a> 

Fiddle Here

    CSS Howto..

    How to move the search text box to the extreme right and Categories drop down to the left in html

    How to center this grid layout with css? [closed]

    How to add space to left-right of the Web-Page using HTML/CSS

    How to do fallback for browser-specific css expressions

    How to create a WordPress theme that use BootStrap?

    How to make permanent changes to a website's CSS from within the browser?

    CSS Shadows (how to get rid of top shadow?)

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    Javascript: how to check/delete a css style tag in the head of the document

    How to set position of checkbox to middle of td and input type text using css? [duplicate]

    How can i select the div from CSS?

    How to I center my submit button in CSS?

    CSS select + select How to get first select

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    How to make combination of images responsive?

    How to re-size image in wordpress template

    How to organize CSS Sheets [closed]

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    How can I make images fit into a 200 pixel square box using CSS?

    How to switch css table-cell from left to right?

    How can I align unsorted list horizontly ?

    How to center the boxes as shown?

    How to get horizontal scrollbar to appear beneath content?

    How can i achieve this style in Html/Css?

    How do I avoid using !important?

    How to make visual changes with dynamically generated HTML code?

    How do align texts in the child div

    How to wrap text in table cell at hyphen?

    How to access an element's class value via CSS

    How do I add another tab using CSS3? Noy Hadar