100% Div Причиняет сокращение нижней части ребенка

Question

У меня есть div #wrapper, высота которого 100%. Внутри этого у меня есть несколько разделов контента, каждый из них отображается как встроенный блок и имеет нижнее поле. Проблема в том, что этот нижний край каким-то образом рушится.

Проблему можно увидеть с очень простым кодом:

<div id="wrapper"> 
    <div id="content"> 
     <!-- lots of content here that will fill the browser window --> 
    </div> 
</div> 

Я создал пример, который можно увидеть здесь: http://jsfiddle.net/Y6tJw/

У меня есть чувство, что это проблема WebKit и как Firefox и IE отображают страницу с соответствующим запасом. Любая помощь?

Answer 1

Не спрашивайте меня, почему это работает, но это будет работать http://jsfiddle.net/Y6tJw/2/

Стиль

#wrapper { height: 100%; background: blue; } 
#innerwrap { padding-bottom:300px; background: blue;} 

HTML

<div id="wrapper"> 
<div id="innerwrap"> 
<div id="content"> 
    <!-- lots of content here that will fill the browser window --> 
</div> 
</div> 
</div> 

Answer 2

это происходит потому, что вы дали вашему телу высоту 100 % с min-height. Попробуйте дать height:auto; это будет работать