최소 높이 : 100 %?

Question

960 픽셀 폭의 div가있는 CSS 레이아웃을 만들고 있는데 페이지 상단에서 하단까지 도달하고 싶습니다. 분명한 해결책은 min-height: 100%;이지만 작동하지 않습니다. 여기 내 CSS의 :

* { 
margin: 0px; 
padding: 0px; 
} 
body { 
background: #FF0000; 
height: 100%; 
} 
html { 
height: 100%; 
} 
#sheet { 
width: 960px; 
min-height: 100%; 
background: #000000; 
margin: 0px auto 0px auto; 
} 
#sheet1 { 
width: 760px; 
min-height: 100%; 
top: 0px; 
bottom: 0px; 
background: #FFFFFF; 
} 

그리고 내 HTML에서 : 나는 # 시트의 min-heightheight로 변경할 때

<div id="sheet"> 
    <div id="sheet1"> 

    </div> 
</div> 

이 잘 표시 할 수 있지만 내용이 차지하면 그때는 더 이상 잘라 얻을 것 페이지. 이것에 대한 해결책이 있습니까?

Answer 1

# sheet를 height : 100 %가 아닌 100 %로 변경하고 # sheet-1 내부에 일부 내용을 추가해보십시오.

CSS는 height 속성이 정의되지 않은 경우 min-height 및 max-height을 무시합니다

Answer 2

100 % 사용은 HTML 요소 (텍스트, 이미지 또는 기타 요소)가있는 경우에만 적용됩니다. 높이는 요소의 길이에 따라 더 높거나 짧을 것입니다. 따라서 최소 높이는 요소의 길이 또는 높이의 정확한 수만 지정하는 데 사용됩니다. 비율 대신 픽셀을 사용해보십시오.

Answer 3

어떤 float 또는 clear 속성을 추가하지 않기 때문에 ...,

당신이 display:inline-block을 추가 할 수 있지만 그것을 깰 수있는 경우를 제외하고 당신의 margin:0px auto; 그리고 난 당신이 이런 식으로하기로 결정 :

* { 
    margin: 0px; 
    padding: 0px; 
} 
body { 
background: #FF0000; 
height: 100%; 
text-align:center; 
} 
body * { 
text-align:left; 
} 
html { 
height: 100%; 
} 
#sheet { 
width: 960px; 
display:inline-block; // It can make height auto 
min-height: 100%; 
background: #000000; 
margin: 0px auto 0px auto; 
text-align:center; 
} 
#sheet1 { 
width: 760px; 
display:inline-block; 
min-height: 100%; 
background: #FFFFFF; 
text-align:left; 
} 

당신의 CSS를 교체, 얇은 내 코드와 나는 함께 k는 작동해야합니다 ...