<body>延伸到100％的內容，而不是瀏覽器的大小

我目前有一個問題，試圖讓一個容器延伸到瀏覽器窗口下方。<body>延伸到100％的內容，而不是瀏覽器的大小

我已經添加了的jsfiddle：http://jsfiddle.net/v9GKj/

我正在尋找一個解決方案，將延長當含量比側邊欄不再是瀏覽器的大小以下，但仍然會填滿窗口的高度當沒有太多的內容

<div id="menubg"></div> 
<div id="menu"> 
    <div class="sidenav"> 
     <ul> 
      <li><a href="#">Nav</a></li> 
      <li><a href="#">Nav</a></li> 
      <li><a href="#">Nav</a></li> 
      <li><a href="#">Nav</a></li> 
      <li><a href="#">Nav</a></li> 
     </ul> 
    </div> 
</div> 
<div id="container"> 
    <div id="content"> 
     test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> 
     test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> 
     test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> 
     test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> 

    </div> 
</div>

而CSS：

html, body { 
margin:0; 
padding:0; 
border:0; 
height:100%; 
} 

body { 
position:relative; 
background-color:blue; 
} 

#container { 
width:100%; 
height:100%; 
margin:0; 
background-color:red; 
} 

#content { 
width:1060px; 
padding-left:210px; 
margin-left:auto; 
margin-right:auto; 
} 


#menubg { 
background-color:rgba(0, 0, 0, 0.4); 
position:fixed; 
left:0px; 
top:0px; 
bottom:0px; 
width:200px; 
} 

#menu { 
position:absolute; 
left:0px; 
top:0px; 
bottom:0px; 
width:200px; 
} 

.sidenav ul { 
list-style-type:none; 
font-size:large; 
margin:0px; 
padding:0px; 
opacity:1; 
} 

.sidenav a:link, .sidenav a:visited { 
display:block; 
color: #ffffff; 
text-decoration:none; 
padding:10px; 
width:180px; 
border-bottom:1px solid white; 
border-top:1px solid gray; 
opacity:1; 
} 

.sidenav a:hover { 
color:#262626; 
background-color:white; 
}

來源

2014-05-22 BeBeardy

嘗試'孩子繼承高度最小高度：100％''上＃content'和'＃container' – Mathias

變化html, body { height:100% }到html, body { height: 100%; min-height:100% }

Demo with no content

Demo with lots of content

來源

2014-05-22 14:14:01 Turnip

實際上，幾乎在那裏，但現在的問題是，如果導航長，但內容很短，那麼紅色背景不會填滿整個頁面 - http://jsfiddle.net/gGqL8/ – BeBeardy

#container { 
width:100%; 
min-height:100%; 
margin:0; 
background-color:red; 
}

這樣會延長容器填充瀏覽器總是寬度即使內容是以下。

你並不需要爲body指定min-height:100%，因爲身體會在此基礎上爲container

來源

2014-05-22 14:21:36 mohamedrias

感謝您的幫幫我。幾乎，但我努力讓網站在導航欄更長的示例中正常工作。看到這裏：jsfiddle.net/gGqL8紅色背景不會填滿整個頁面。我認爲即時通訊是一個失敗的CSS戰鬥，因爲導航絕對定位 – BeBeardy

<body>延伸到100％的內容，而不是瀏覽器的大小

回答

相關問題