CODEWITHSUNDEEP
htmlcsscss-float
WeaklyTyped
WeaklyTyped

Reputation: 1341

Why floats within a wrapper which is immediate child of body tag accept 100% height

Best way to explain my question would be using code samples. I have linked two fiddles.

Immediate Child
In this example, .wrapper is a immediate child of body and the two floats .left, .right accept the property of height: 100%;

Nested Child
In this example, .wrapper is not a immediate child of body and the two floats .left, .right do not accept the property of height: 100%;

As far as I understand, height: 100%; does not work on floats and techniques using absolute postions and table-cell etc. need to used. Then why do they work in the former case.

PS: Tested in latest stable Chromium and Firefox

Upvotes: 0

Views: 34

Answers (2)

the8472
the8472

Reputation: 43125

If you want to size things based on the viewport you can use height:100vh; instead

Upvotes: 0

Madara's Ghost
Madara's Ghost

Reputation: 175048

height: 100% works only if the parent element has a height which isn't auto.

So in your second example, what's missing is .container { height: 100%; } and then it works.

Upvotes: 1

Related Questions