Обертывание 2 вертикально уложенных divs, 1 div 100% высокий

Question

Я прогуливался по интернету некоторое время, но я не могу найти решение для своей проблемы. Возможно, вы могли бы помочь мне.

Вопрос

Я пытаюсь обернуть DIV вокруг 2 вертикально уложенными дивы. В этот момент у меня есть верхний div, который заполняет видовое окно (100% высота, 100% ширина) и нижний div, который имеет переменную высоту, но со 100% шириной. Верхний div служит контейнером для горизонтального и вертикально выровненного содержимого.

Как только я применяю обертку к двум divs, верхняя часть обрушивается. Он перестает заполнять всю высоту видового экрана.

Пример

Текущий HTML выглядит следующим образом:

<div id="top"> 
    <div id="top_content">Top content</div> 
</div> 
<div id="bottom">Bottom content</div> 

С конечно в JSFiddle: http://jsfiddle.net/4u4nqrcv/

HTML, мне нужно выглядит следующим образом:

<div id="wrapper"> 
    <div id="top"> 
     <div id="top_content">Top content</div> 
    </div> 
    <div id="bottom">Bottom content</div> 
</div> 

Также с JSFiddle: http://jsfiddle.net/ggsztx78/

Вы можете ясно видеть сверху ДИВ разрушилась

Вопрос

Как можно обернуть 2 вертикально сложенных дивы, сохраняя высоту заполнения окна просмотра верхней DIV ? Мне просто нужно, чтобы выяснить, какие именно CSS, я должен обратиться к обертке и, возможно, 2 завернутые дивы

Answer 1

Вы можете использовать блок просмотра vh. 100vh = 100% высоты просмотра.

http://jsfiddle.net/ggsztx78/3/

#top { 
    width: 100%; 
    height: 100vh; 
    background-color: #f4f; 
    display: table; 
} 

поддержка не that bad, если вы не используете vmin или vmax.

Answer 2

Работа JSfiddle Это легко, вы не устанавливали параметр CSS для обертки, и это необходимо также иметь высоту и ширина 100%, маржа и обивка устанавливается в 0.

#wrapper{ 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
} 

Answer 3

Вы должны также дать обертку height: 100%.

Установив height: 100%, вы указываете элемент, чтобы он стал 100% высоты его родителя. Поэтому вам нужно дать всем предкам #top-content высоту 100%, чтобы #top-content занимал 100% высоты экрана.