세로로 쌓인 div 2 개, 1 div 100 % 높이로 배열

Question

잠시 동안 인터넷을 돌아 다녔지 만 문제를 해결할 수없는 것 같습니다. 아마도 나를 도울 수 있습니다.

내가이 개 수직으로 적층 된 div 주위 사업부를 포장하려고

문제. 현재 뷰포트 작성 (100 % 높이, 100 % 너비) 및 가변 높이이지만 100 % 너비 인 하단 div가있는 최상위 div가 있습니다. 상단 div는 가로 및 세로로 정렬 된 내용의 컨테이너 역할을합니다.

두 div에 래퍼를 적용하면 맨 위가 축소됩니다. 전체 뷰포트 높이 채우기를 중지합니다.

예 현재의 HTML은 다음과 같습니다

하십시오 JSFiddle 과정으로

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

: 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와 또한 16,

: http://jsfiddle.net/ggsztx78/

당신은 분명히 최고 사업부는

내가 최고 DIV의 뷰포트 충전 높이를 유지, 2 개 개의 수직으로 적층 된 div를 래핑 수있는 방법 질문

붕괴 볼 수 있습니다 ? 난 그냥 2 개 포장 된 div JSfiddle 그것은 쉽게 , 당신은 래퍼에 대한 CSS 매개 변수를 설정하지 않은 작업을

Answer 1

뷰포트 단위 vh를 사용할 수 있습니다. 100vh = 뷰포트 높이의 100 %. 당신이 vmin 또는 vmax을 사용하지 않는 경우

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

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

지원 that bad 없습니다.

Answer 2

가능성이 래퍼에 적용해야 정확히 CSS 알아낼 필요하고, 또한 높이가 필요하고 100 %, 마진과 패딩의 폭은 0 당신은 또한 래퍼 height: 100%을 줄 필요가

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

Answer 3

로 설정합니다.

height: 100%으로 설정하면 요소의 부모 높이가 100 %가되도록 지정합니다. 그러므로 #top-content의 모든 조상에게 100 %의 높이를 부여하여 #top-content이 화면 높이의 100 %를 차지하도록해야합니다.