100% Высота Div внутри другого 100% div

Question

Я использовал 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; 
    } 

Я хочу nav_container, чтобы охватить 100% высоту между верхним и нижними колонтитулами. Я установил тело и высоту 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; 
} 

* Fiddle: *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; 
}