CODEWITHSUNDEEP
htmlcss
Ajedi32
Ajedi32

Reputation: 48368

Why does 100% height = 0px in this context?

Given the following HTML:

<div class='page-header'>
    <h1>Header</h1>
    <div class="thingy">
    </div>
</div>

And the following CSS:

.page-header {
    background-color: blue;
    border: 5px solid green;
}

h1 {
    background-color: red;
    display: inline-block;
}

.thingy {
    float: right;
    height: 100%;
    width: 20px;
    background-color: yellow;
}

Why is the div with class='thingy' not visible?

Rendering of the above HTML. Yellow box is not visible.

View in JSFiddle

Changing to the height to a fixed value makes it visible, but that's not what I want. I want the element's height to scale with the height of the element it's in. How do I do that?

Upvotes: 0

Views: 1104

Answers (7)

JRulle
JRulle

Reputation: 7568

I think this may be what you are trying to achieve. The "header" element grows to accommodate the elements it contains (I put a min-height on "thingy" just to show where it is when viewed in browser).

<html>
  <head>
  <style>
    .header {background-color: blue; border: 5px solid green; height: auto; overflow: hidden;}
    .thingy {float: right; height: auto; min-height: 100px; width: 20px; background-color: yellow;}
    h1 {background-color: red; display: inline-block;}
    </style>
  </head>
  <body>
  <div class="header">
        <h1>
      header
      </h1>
    <div class="thingy"></div>
  </div>
  </body>
</html>

Upvotes: 0

Toby Osborne
Toby Osborne

Reputation: 375

Not sure about the reactions I will get for this but as a possible solution.

if you set the page-header to 

position:relative

and then set the thingy class to 

position:absolute;
right:0px;
top:0px;

you no longer need the float:right and it has the same height as the parent.

here is a fiddle

Upvotes: 1

Brian Stephens
Brian Stephens

Reputation: 5261

Here's another alternative, although it requires jQuery:

$(function() { $('.thingy').height($('.thingy').parent().height()); });

Upvotes: 0

Jakub Matczak
Jakub Matczak

Reputation: 15656

This is bacause the parent container doesn't have set any height. If you set any fixed height ( in px for example) for .page-header, then .thingy will also have this height.

For example: 

.page-header {
    background-color: blue;
    border: 5px solid green;
    height: 100px;
}

http://jsfiddle.net/r9Zx6/2/

Edit:

If you want it to automatically adjust and always fit 100% of parent height you can try a "hack" like this:

First you set huge vertical padding and the same but negative margin:

.thingy {
    float: right;
    height: 100%;
    width: 20px;
    background-color: yellow;
    padding: 1000px 0;
    margin: -1000px 0;
}

then set overflow:hidden to parent:

.page-header {
    background-color: blue;
    border: 5px solid green;    
    overflow: hidden;
}

http://jsfiddle.net/r9Zx6/5/

Should work in this case but it also depends on what you're trying to achieve in the end.

Another way is to use javascript but I don't think it's a good idea to involve JS to such cosmetic issues.

Upvotes: 2

j08691
j08691

Reputation: 207901

As as stated in my comment, it's because none of that element's parents have a declared height. Why does that matter? Becuase that's just how it works.

MDN:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

Upvotes: 2

Connor Simpson
Connor Simpson

Reputation: 487

height: 100%; means what is the exact height of the child not the parent, so using it in that context is pointless since the height is automatically 100% and sadly there is no height so the container isn't shown.

Upvotes: 0

Sachin
Sachin

Reputation: 40970

Because you didn't give the height to the parent element

try with this

.page-header {
    background-color: blue;
    border: 5px solid green;
    height:60px;
}

Js Fiddle Demo

Upvotes: 3

Related Questions