100％div div 100％div

我之前使用过CSS（复制/粘贴，模板等），但这是我第一次尝试从头开始自己做。所以，如果这很愚蠢，我很抱歉，但我环顾四周，找不到答案。100％div div 100％div

我想要一个标题，然后在主体中，左侧的静态宽度导航，右侧的旁边，大内容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％。

当我把那包东西展现出来的股利，然后我得到这样的： http://jsfiddle.net/64JFG/ 这是一个小更正确的，但现在有一个在你必须滚动底部的“额外”的空间。

底部的滚动是问题。它看起来像是100％的身体+头部的高度。

任何想法？再次，对不起，如果这是愚蠢的。

谢谢！

来源

2013-12-11 user3093078

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/

来源

2013-12-11 22:52:30

我想你已经把太多身高：100％在这里。如果body_wrapper是一个真正的高度，而不是百分比的代码将工作

#body_height { 
    height: 400px; 
}

此外，我不认为你的内容容器需要左浮动，但情况因人而异

来源

2013-12-11 22:28:06 vogomatix

我已经更新了你的提琴：

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

添加内容和导航样式position：fixed;

#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; 
}

来源

2013-12-11 22:33:47 Rolo

如果内容div有很多文字，则不能滚动到底部，因为您已为该div设置了固定位置。 –

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; 
}

来源

2013-12-11 22:34:18

100％div div 100％div

回答

相关问题