另一个 100% div 内的 100% Height Div答案

【问题标题】：100% Height Div inside another 100% div另一个 100% div 内的 100% Height Div
【发布时间】：2013-12-12 06:52:30
【问题描述】：

我以前使用过 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% 的 body + header 的高度。

有什么想法吗？再次抱歉，如果这是愚蠢的。

谢谢！

【问题讨论】：

标签： css html height

【解决方案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/

【讨论】：

【解决方案2】：

我认为你在这里放了太多 height:100%。如果 body_wrapper 是真实高度而不是百分比，您的代码将起作用

#body_height {
    height: 400px;
}

另外我不认为你的内容容器需要向左浮动，但是 YMMV

【讨论】：

【解决方案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;
}

【讨论】：

如果content div有很多文字，你不能滚动到底部，因为你已经为那个div设置了固定位置。

【解决方案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; 
}

【讨论】：