什麼是標題+內容的最佳解決方案是100％高度而不滾動

我有一個三列css佈局，頂部有一個標題。在左邊會有導航，右邊是一個小列，有些廣告可能是左右的，中間會有內容。我想DIV的左，右和中間去頁面的底部（所以我想我需要的高度：100％），我希望頭部固定高度60px。我嘗試了幾種解決方案，我在互聯網上找到了它，但是如果給每個人100％的高度（使頁面底部的「右」和「左」的背景）我總是需要滾動一下。我非常確定，這是因爲頭部具有絕對高度值。即使我把所有東西都放在一個100％高度的容器裏。什麼是標題+內容的最佳解決方案是100％高度而不滾動

我的HTML看起來像這樣：

<div id="container"> 
    <div id="header"><h1>Header</h1></div> 
     <div id="left"> 
      <ul id = "nav"> 
       <li><a href="link.html">Link1</a></li> 
       <li><a href="link.html">Link2</a></li> 
      </ul> 
     </div> 

     <div id="right"><p>Advertisement 1 </p><p>Advertisment 2</p></div> 
     <div id="middle"> 
      some content 
     </div> 
    </div>

和相應的CSS它是：

html,body{ 
    height:100%; 
    margin:0; 
    padding:0; 
    line-height: 1.5em; 
} 

#container{ 
    position:relative; 
    width: 850px; /*Width of main container*/ 
    margin: 0 auto; /*Center container on page*/ 
    height:100%; 
} 

#header{ 
    width: 850px; 
    background: #EAEAEA; 
    height: 90px; /*Height of top section*/ 
    text-align: center; 
} 

#left { 
    width: 200px; 
    float:left; 
    background: #CCFFFF; 
    height:100% 


} 
#middle{ 
    width: 490px; 
    margin-left:200px; 
    padding-left:10px; 
    height:100%; 

} 

#right { 
    width: 150px; 
    float: right; 
    background: #e0eeee; 
    height:100%; 

} 

#left ul { 
    padding: 0; 
    list-style: none; 
    width: 200px; 

}

感謝ü提前。

來源

2014-05-23 user2311649

更改position: relative;到position: absolute;在您的#container id內。此時，您可能會在標題後留下您的左側，中間和右側。如果是的話，你會添加top: 90px;，確保頂部後的值與頭部div的高度相匹配。

來源

2014-05-23 15:10:12 Sabolis

什麼是標題+內容的最佳解決方案是100％高度而不滾動

回答

相關問題