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

回答

相關問題