다른 100 % div 안에 100 % Height div

Question

CSS (복사/붙여 넣기, 템플릿 등)를 사용하기 전에 CSS를 처음부터 직접 사용해 보려고합니다. 죄송합니다. 어리석은 짓이라면 둘러 보았지만 답을 찾을 수 없었습니다.

머리글을 입력 한 다음 본문에서 왼쪽에 정적 너비 탐색을, 오른쪽에는 큰 내용 div를, 아래에는 바닥 글을 모두 넣으려고합니다.

<div id = "header"> 
    Header 
</div> 

<div id = "body_wrapper"> 
    <div id = "nav_container"> 
    nav 
    </div> 
    <div id = "content_container"> 
    content  
    </div> 
</div> 

및

 body, html 
    { 
     margin:0; 
     height:100%; 
    } 

    #master_wrapper 
    { 
     width:100%; 
     min-height:100%; 
     background:#57a957; 
    } 

    #header 
    { 
     width:100%; 
     height:60px; 
     background:#1A2127; 
    } 

    #body_wrapper 
    { 
     width:100%; 
     height:100%; 
    } 

    #nav_container 
    { 
     height:100%; 
     min-height:100%; 
     background:#b94a48; 
     width:200px; 
     float:left; 
    } 

    #content_container 
    { 
     height:100%; 
     min-height:100%; 
     background:#7a43b6; 
      margin-right:0; 
     float:left; 
     margin-right:0; 
      margin-left:0; 
    } 

내가 머리글과 바닥 글 사이의 높이의 100 %를 걸쳐 nav_container합니다 :

나는이 있습니다. body 및 html 높이를 100 %로 설정하고 nav_container의 높이를 100 %로 설정하고 래퍼에 모든 것을 넣을 때이 작업이 수행됩니다. http://jsfiddle.net/J4u8k/
빨강이 100 %로 가고 싶습니다. 내가 모든 것을 감싸는 DIV을 촬영하면

, 나는이 얻을 : 즉 이제 스크롤해야 하단에있는 "추가"공간이 거기를 제외하고, 좀 더 정확 http://jsfiddle.net/64JFG/ .

하단의 스크롤이 문제입니다. 그것은 몸의 100 %와 머리말의 높이를 취하는 것처럼 보입니다.

아이디어가 있으십니까? 다시 말하지만, 이것이 어리 석다면 미안합니다.

감사합니다.

Answer 1

HTML

<div id="wrapper"> 
    <div id="header"> Header </div> 
    <div id="content"> 
     <div id="nav">Nav </div> 
     <div id="article"></div> 
    </div> 
    <div id="footer"> Footer </div> 
</div> 

CSS

#wrapper 
{ 
    margin 0px auto; 
    padding:0px; 
    width:1000px; 
} 

#header 
{ 
    margin:0px; 
    padding:0px; 
    background-color:Black; 
    width:1000px; 
    height:100px; 
} 
#footer 
{ 
    margin:0px; 
    padding:0px; 
    background-color:Black; 
    width:1000px; 
    height:50px; 
} 

#content 
{ 
    margin:0px; 
    padding:0px; 
     width:1000px; 
    height:500px; 
} 

#nav 
{ 
    margin:0px; 
    padding:0px; 
    float:left; 
    background-color:red; 
     width:250px; 
    height:500px; 
} 

#article 
{ 
    margin:0px; 
    padding:0px; 
    float:right; 
    background-color:green; 
     width:750px; 
    height:500px; 
} 

* 바이올린 : *http://jsfiddle.net/64JFG/3/

Answer 2

너는 너무 많이 넣어 졌다고 생각한다. 높이 : 100 %. body_wrapper 실제 높이가 백분율 대신하는 경우 코드는 또한

#body_height { 
    height: 400px; 
} 

내가 콘텐츠 컨테이너가 왼쪽으로 떠 필요하다고 생각하지 않는다 작동하지만 YMMV

Answer 3

나는 당신의 바이올린을 업데이트 한 것입니다 :

http://jsfiddle.net/J4u8k/2/

콘텐츠 및 탐색 스타일 추가 위치 : 고정;

#nav_container 
{ 
height:100%; 
min-height:100%; 
background:#b94a48; 
width:200px; 
float:left; 
    position:fixed; 
} 

#content_container 
{ 
height:100%; 
min-height:100%; 
background:#7a43b6; 
margin-right:0; 
float:left; 
margin-right:0; 
margin-left:200px; 
    position:fixed; 
} 

Answer 4

body, html{ 
    margin:0; 
    height:100%; 
    min-height: 100%; 
} 

#master_wrapper{ 
    width:100%; 
    min-height:100%; 
    background:#57a957; 
    overflow:hidden; 
} 

#header{  
    height:60px; 
    background:#1A2127; 
} 

#nav_container{ 
    background:#b94a48; 
    width:200px; 
    float:left; 
//kinds of hack for column 100% 
    margin-bottom: -30000px; 
    padding-bottom: 29999px; 
} 

#content_container{ 
    margin-bottom: -30000px; 
    padding-bottom: 29999px; 
    background:#7a43b6; 
    float:left; 
}