8

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?

Aesthetic
  • 763
  • 1
  • 14
  • 31

4 Answers4

11

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

Martijn
  • 15,791
  • 4
  • 36
  • 68
Pete
  • 57,112
  • 28
  • 117
  • 166
  • Thanks for the suggestion, but box-sizing does not work pretty well on Firefox, it does well on Chrome and IE... I tried the Fiddle on those browsers... – Aesthetic Feb 14 '14 at 11:03
  • 1
    box sizing should work on all modern browsers: http://caniuse.com/css3-boxsizing. If you are using an older version of firefox you will need to add the moz suffix – Pete Feb 14 '14 at 11:49
  • oh I see, I not familiar with that yet & responsive design, but I hope to learn it sooner, the site you linked is useful, really. – Aesthetic Feb 14 '14 at 11:53
  • Sir for instance I have a `32px` `font-size` is there a way to make the element vertically-centered using box-sizing? – Aesthetic Feb 14 '14 at 14:51
  • This technique is really something useful!, cause it centers itself vertically, Is there an disadvantage of using these? I mean, it is not semantically a table... – Aesthetic Feb 15 '14 at 04:33
  • 1
    the only disadvantage is that it won't work in IE7 or earlier, however I always says punish the stupid ie users! – Pete Feb 17 '14 at 08:47
  • 1
    @Martijn - the ie7 warning was valid at the time - 2014. If you are going to remove that, then remove the moz suffix too as this is now fully supported in all modern browsers – Pete Jun 15 '16 at 11:23
  • 1
    Haha you are completely correct, guess the old disliking of IE was a bit stronger. Also took the css `-moz` prefix out of the answer :) – Martijn Jun 15 '16 at 11:43
2

Here is the another way :-

Fiddle :http://jsfiddle.net/nikhilvkd/4YQtA/3/

a {
    height: 30px;/*changes here*/
    padding:10px;
    display: inline-block;
    font-size: 24px;
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}
Aesthetic
  • 763
  • 1
  • 14
  • 31
Krish
  • 1,884
  • 2
  • 16
  • 40
  • I use preferably `height: 100%` so that I won't have to worry about `padding-top` and `padding-bottom` differences from the topbar dimension, but this code is ideal for fixed container values. – Aesthetic Feb 14 '14 at 11:11
2
div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 0 10px;    
    height: 50px;
    line-height: 50px;
    display: inline-block;
}
Arun
  • 257
  • 1
  • 5
  • 22
0

The technique I have found is to use 0 padding on top and bottom for the <a> element then use height: 100% to fill the height dimension and just use line-height: 200% to adjust the text.

Change these CSS properties to:

a {
    padding: 0 10px;
    display: inline-block;
    height: 100%;
    line-height: 200%;
}

Fiddle Here

Aesthetic
  • 763
  • 1
  • 14
  • 31
  • Please answer if there's a better way. – Aesthetic Feb 14 '14 at 08:25
  • Nope, display: block or inline-block and setting it's height to 100% pretty much does the trick. – deadconversations Feb 14 '14 at 08:29
  • @Ruddy Sir, You have been a member for 10 months without noticing this? blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions – Aesthetic Feb 14 '14 at 08:36
  • @Daniel Oh dear, right lets see. You asked a questions full well knowing the answer. There are a **ton** of questions asking pretty much the same thing so why not try to use the search bar? If you want to know if there is a better way you should add what you think into the question, not create an answer a mere 50 seconds after posting a question. If you had posted this and not many people got back to you then you found a way to do it, then by all means add it as an answer and I'm sure you will get up voted for it. – Ruddy Feb 14 '14 at 08:41
  • Sir, I've searched and found this http://stackoverflow.com/questions/546946/css-make-a-block-element-fill-the-entire-space-of-a-parent-element but there's nothing such as to filling the anchor element's height to 100%, if there is, please link here so I can see it, I'm a newbie in HTML, as of I've read in the " It’s OK to Ask and Answer Your Own Questions" It's said that "if you’d like to document it in public so others (including yourself) can find it later" please correct me if have misunderstood anything. – Aesthetic Feb 14 '14 at 08:48
  • This answer is Pretty Cool Dude – Dinesh Kanivu Feb 14 '14 at 09:29