height:100% not giving full parent height

Question

While i was working on a website with one-page scrollable layout, i came across this:

when giving height:100% to an element inside a min-height:100% parent, it doesnt actually go full height.

Can someone explain this behaviour? In css there are obviously many ways to reach the same result, but understanding the underlying reasons will help me and anyone with a similar question greatly.

I'll include this jsfiddle to illustrate: http://jsfiddle.net/kNwhu/1/

Thanks in advance

Here's a good explanation of why you're seeing what you're seeing: http://stackoverflow.com/questions/2341821/height100-vs-min-height100 — LuFaMa, Dec 06 '13 at 14:48

score 1 · Accepted Answer · answered Dec 06 '13 at 14:45

1

The problem is inside section because you specify a min-height but not the height try to insert height:100% to section like this:

section{
    height:100%;
    min-height:100%;
    background-color: #cc333f;
}

DEMO

answered Dec 06 '13 at 14:45

Alessandro Minoccheri

35,521
22
122
171

height:100% not giving full parent height

1 Answers1