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％的高度。我将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; 
}

100％高度Div在另一个100％div内

4 个答案: