3 행, 유체 높이

나는 내가이 일을 나던 100 %로 몸의 높이를 지정하면 수직 유체 박스 모델3 행, 유체 높이

|-------------| 
|    | 
|header 20% | 
|=============| 
|    | 
|    | 
|content 60% | 
|    | 
|-------------| 
|    | 
|footer 20% | 
|=============|

을 달성하고자합니다.

CSS에서 수직 유체 솔루션을 얻으려면 어떻게해야합니까?

또는 내가 자바 스크립트

JS를 사용해야합니까 : 바이올린 http://jsfiddle.net/EGesW/5/

출처

2011-11-24 codeAnand

html { 
    height:100%; 
} 
body{ 
    height:100%; 
} 
#header{ 
    background:#FF9933; 
    min-height:20%; 
} 
#content{ 
    background:#DDD; 
    min-height:60%; 
} 
#footer{ 
    background:#138808; 
    min-height:20%; 
}

출처

2011-11-24 17:58:54 MatthewK

감사합니다. 그런 문서/정보는 어디에서 얻을 수 있습니까? – codeAnand

Personnaly 나는 몇 년 전에 여기서 시작했다. (http://w3schools.com/css/default.asp). 또한 IE 6에서는 html 100 %를 지원하지 않는다고 생각합니다. – MatthewK

모바일에 문제가 있습니다. 나는 내용이 100 %보다 크지 만 html과 body의 CSS 높이가 100 %이면 아이폰에서 스크롤 할 수 없다는 것을 경험했다. – HerrSerker

HTML 태그도 대부분의 브라우저에서 CSS에서 DOM의 한 부분으로 분류된다. 대신, 매튜 말했듯이 너무

html, body { height:100%; }

, 그것은

출처

2011-11-24 18:00:17 Lee

정말 고맙습니다. 그러한 문서/정보를 얻으시겠습니까? – codeAnand

작품, 나는 대답을 올렸을 때 바빴다. 나는이 피들을 확인했다 : http://jsfiddle.net/EGesW/11/ – Niels

당신은 당신이 몸을 원하는 경우 100 % html의 높이를 설정해야합니다 너무 나를 이길처럼 너무 HTML로 몸 스타일을 적용

body,html{ 
    height:100%; 
}

Here의 예 : 100 % (부모 엘리먼트의 높이가 설정된 경우 100 % 신장에만 작동)에있을.

출처

2011-11-24 18:00:51 Purag

오, 좋았어, 나는 이것을 알지 못했다. – HerrSerker

3 행, 유체 높이

답변

관련 문제