창 높이만큼 div 높이를 늘리는 방법은 무엇입니까?

Question

고정 헤더와 끈적한 바닥 글이있는 공통 페이지 structure이 있습니다. 하지만 전체 창 영역을 채우기 위해 div 높이를 확장하는 방법을 배제 할 수는 없습니다.

HTML

<header> 
    header header header 
</header> 

<div id="page"> 
    <div id="left">side bar side bar</div> 
    <div id="right"> 
    <p>I want to draw the brown dashed line all the way down to the footer even when the #right content is too little to fill the window.</p> 
    <p>I know that I have to set height 100% on #right so that it stretches to fill the green box. But, the green box itself does not stretch to the bottom despite height 100% because the yellow box does not have explicit height defined.</p> 
    <p>What can I do?</p> 
    </div> 
</div> 

<footer> 
    footer footer footer 
</footer> 

CSS

html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; } 
p { margin-top: 0 } 
html { height: 100%; min-height: 100%; } 
header { position: fixed; background-color: red; height: 50px; width: 100%; } 
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; } 
body { 
    position:relative; /* container for footer */ 
    border: 5px solid yellow; 
    min-height: 100%; /* not explicitly setting height to allow footer to be pushed downwards */ 
} 
#page { 
    padding: 60px 0 20px 0; 
    border: 5px solid green; 
    height: 100%; /* not working: how to extend page all the way to the bottom, min-height = fill the window? */ 
} 
#page:after { content:""; display: block; clear:both; } 
#left { float: left; width: 100px; } 
#right { 
    margin-left: 100px; 
    padding-left: 10px; 
    /* objective: to create vertical divider between #right and #left that extends to the footer */ 
    height: 100%; 
    border-left: 5px dashed brown; 
} 

Answer 1

당신은 항상 0 픽셀 떨어져 윈도우의 상단과 하단에서 div의를 만들기 위해 절대 위치를 사용할 수 있습니다. 당신은 값으로 놀러해야 할 수도 있지만,이 같은 작업을해야합니다 :

#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; } 
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; } 

편집 : Here's a fiddle이 일할 수있는 방법을 보여줍니다.

Answer 2

몸이 높이가 전혀 없기 때문에 높이 100 %가 작동하지 않는 이유는 높이가 몸 안의 항목에 따라 다릅니다.

해결 방법이 있습니다.

다음을 스타일에 적용하십시오.

html, html body { 
    height: 100%; 
} 
#page { /* If #page is a lvl 1 child of body, this should work */ 
    height: 100%; 
} 

다음은 JSFiddle

http://jsfiddle.net/wetjyLy3/1/