브라우저 창의 높이 및 Div

현재 높이가 고정 된 배너 (100px)가있는 웹 사이트를 만들려고하고 있으며 나머지 콘텐츠는 나머지 페이지를 채우기를 원합니다. 배너가 div에 있고 페이지의 나머지 부분이 다른 div에 있고 그 페이지의 나머지 부분이 높이가 100px (100 % - 100px) 미만이되도록합니다. 분명히 높이에 관해서는 %와 px를 섞을 수 없습니다. 그러나 변수를 widow 높이 (100 %)에서 배너 높이 (100 픽셀)를 뺀 값으로 정의한 다음 나머지 div의 높이를 정의 할 수 있습니다.브라우저 창의 높이 및 Div

저는 css, html을 처음 사용하며 다른 언어도 거의 모릅니다. 따라서 단순한 사람이므로 답을 간단하게 유지하십시오!

출처

2012-09-27 David Ward

그것이 무엇을 의미 하는가 높이는 100 % -100 픽셀입니까? 그 중 하나는 최소이고 다른 하나는 최대입니까? – thatidiotguy

나는 이것이 다른 [질문] [1]과 같을 것이라고 생각한다. [1] : http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Ozzyberto

는 모든 응답에 감사드립니다. Ozzyberto의 다른 스레드에 대한 링크를 통해 사이드 메뉴와 콘텐츠 div 각각을 'position : fixed'로 설정하고 다음 설정으로 'top : 100px; 바닥 : 0;'. 그들은 높이 : 100 %를 가진 나의 div에 앉아 있었고 몸도 높이 : 100 %를 가지고있었습니다. –

<div style="height: 100px"> 
    Your banner 
</div> 
<div> 
    Body 
</div>

출처

2012-09-27 20:25:31 HelloWorld

신장은 동적이어서, "콘텐츠 섹션"에 콘텐츠를 추가 할 때 컨티넨라의 크기도 그대로 유지됩니다.

간단히 대답하면 '콘텐츠 섹션'의 높이를 설정하지 마세요.

출처

2012-09-27 20:26:15

아쉽게도 높이를 설정하지 않으면 작동하지 않습니다.그러나, 나는 해결책을 찾았다. (나의 초기 질문 후 주석을 보라). –

콘텐츠 div의 높이를 100 %로 설정하면 배너에서 화면 하단까지 공간을 차지할 수 있습니다.

HTML

<html> 
    <head> 
     <title>Foo</title> 
    </head> 

    <body> 
     <div id="banner"></div> 
     <div id="content"></div> 
    </body> 
</html>

CSS 참조 데모 여기

#banner { 
    height: 100px; 
    background-color: #ccc; 
} 

#content { 
    height: 100%; 
    background-color: #000; 
} 

body { 
    height: 100%; 
} 

html { 
    height: 100%; 
}

중요한 부분은 100 % HTML과 몸의 높이를 설정하는 것입니다 http://jsfiddle.net/yHFjh/

출처

2012-09-27 20:29:35 Jim

콘텐츠가 100 %가 아닌 100 % - 100px –

아, 맞아 ... 질문을 잘못 해석 한 것 같습니다. – Jim

height의 html 및 본문을 100 % 생성하십시오. 배너를 절대 위치에 두십시오. 배너 아래에 콘텐츠 div를 추가하고 min-height을 100 %로 설정하십시오. 이 콘텐츠는 배너 뒤에 있지만 최소 100 %는됩니다. 배너의 높이가 padding-top 인 div를 콘텐츠에 추가하여 콘텐츠가 배너 아래에 오지 않도록합니다.

HTML :

<div id="banner"></div> 
<div id="content"> 
    <div id="main"> 
     Lorem Ipsum is simply dummy text.. 
    </div> 
</div>

CSS :

html, body { height: 100%; } 
#banner { position: absolute; height: 100px; width: 100%; background: green; } 
#content { min-height: 100%; background: yellow; } 
#main { padding-top: 100px; }

http://fiddle.jshell.net/pY6dc/

출처

2012-09-27 20:34:19

사용 window.innerHeight/document.documentElement.clientHeight 재산 당신은 당신이 일을 정의 할 필요가 말할 때

<div id="banner">banner</div> 
<div id="content">content</div> 

<script> 
    if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){ 
     document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px"; 
    } else { 
     document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px"; 
    } 
</script>

출처

2012-09-27 20:35:24

브라우저 창의 높이 및 Div

답변

관련 문제