CSS : 페이지 내용이 전체 화면을 채우지 않습니다.

Question

높이가 100 %로 설정되어 있어도 내용이 전체 페이지를 채우지 않습니다.

여기 코드가 있습니다. http://jsfiddle.net/SB67f/1/

HTML :

<div id="head"> 
</div> 
<div id="content"> 
    <div class="box">1 
    </div> 
    <div class="box">2 
    </div> 
    <div class="box">3 
    </div> 
    <div class="box">4 
    </div> 
</div> 
<div id="footer"> 
</div> 

CSS : (가) 전체 화면을 커버하는 대신 그냥 내 마지막 요소에 도달되지 않는 이유 이해가 안

* 
{ 
    margin:0px; 
    padding:0px; 
} 
html 
{ 
    height:100%; 
} 
body 
{ 
    min-height:100%; 
} 
div#content 
{ 
    padding-top:20px; 
    padding-bottom: 20px; 
    background: #dcf0f7; 
} 
div#head 
{ 
    position:fixed; 
    z-index:999; 
    top:0px; 
    left:0px; 
    background:#5e9dc8; 
    width:100%; 
    height:20px; 
} 
div#footer 
{ 
    position:fixed; 
    z-index:999; 
    bottom:0px; 
    left:0px; 
    background:#5e9dc8; 
    width:100%; 
    height:20px; 
} 
div#content div.box 
{ 
    background:#0c2c52; 
    color:white; 
    height:15px; 
    width:300px; 
    margin: 5px auto; 
} 

. 당신은 콘텐츠 사업부를 의미하는 경우

Answer 1

:

:

html,body { 
    height:100%; 
} 

또한 100 %로 #content div의 높이를 설정 마음에

div#content { 
height:100%; 
} 

http://jsfiddle.net/SB67f/2/

곰 당신은 position:fixed; 자연 페이지 흐름 중 상기 요소를 필요로 수직으로 약간의 오버 플로우가 발생할 것이다 #content 사업부 100 % 높이를 설정 position:fixed;에 머리글과 바닥 글을 설정 한 것처럼!

Answer 2

당신은 높이가 필요합니다 : 100 그것에 %뿐만 아니라 HTML과 몸

div#content { 
    height:100%; 
    padding-top:20px; 
    padding-bottom: 20px; 
    background: #dcf0f7; 
} 

당신은 모두 HTML과 신체 요소의 높이를 설정해야 http://jsfiddle.net/SB67f/5/

Answer 3

html, body은 모두 height:100%; min-height:100%이 필요합니다. content div는 min-height:100%이 필요합니다. 여기 바이올린 : http://jsfiddle.net/SB67f/6/

Answer 4

http://jsfiddle.net/SB67f/7/

* 
{ 
    margin:0px; 
    padding:0px; 
} 
html 
{ 
    height:100%; 
} 
body 
{ 
    height:100%; 
} 
div#content 
{ 
    padding-top:20px; 
    padding-bottom: 20px; 
    background: #dcf0f7; 
    height:inherit; 
} 
div#head 
{ 
    position:fixed; 
    z-index:999; 
    top:0px; 
    left:0px; 
    background:#5e9dc8; 
    width:100%; 
    height:20px; 
} 
div#footer 
{ 
    position:fixed; 
    z-index:999; 
    bottom:0px; 
    left:0px; 
    background:#5e9dc8; 
    width:100%; 
    height:20px; 
} 
div#content div.box 
{ 
    background:#0c2c52; 
    color:white; 
    height:15px; 
    width:300px; 
    margin: 5px auto; 
} 

대체 최소 신장 : 100 %; 높이 : 100 %; div # 콘텐츠 높이를 상속으로 설정