css：標題流體高度，但內容可滾動

我正在嘗試爲此找到css的一個污點。我的頁面頂部有一個列表菜單，下面是一個帶有內容的div。內容div應該始終有100％的剩餘視口高度。瀏覽器滾動條應該隱藏，內容div應該有滾動條。直到這裏纔有問題。爲此，我給出了內容分區的位置：絕對值和最高值。css：標題流體高度，但內容可滾動

我的問題知道是，如果用戶調整瀏覽器菜單剎車到一個新的行，並且菜單重疊內容，因爲內容有修復「頂」值。

一個解決方案是讀取瀏覽器調整大小的菜單div的高度，然後設置內容div的位置。但我喜歡避開js。我的問題是，我可以用CSS來做到這一點嗎？

請在下面找到一個例子。

乾杯，

託尼

<!DOCTYPE html> 
<html lang="en"> 
<head class="html5"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 

<style> 
html, body { 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 
#nav{ 
    border:1px solid black; 
    overflow: auto; 
    height: auto !important; 
    height: 50px; 
    min-height: 50px; 
    } 

#nav ul li{ 
    list-style-type: none; 
    float:left; 
    margin: 0 40px 0 0; 
} 

#content{ 
    overflow:scroll; 
    height:100%; 
    top:50px; 
    position: absolute; 

} 

#content p{height:1024px;border:1px solid red;margin:0;} 

</style> 

</head> 
<body> 

    <div id="nav"> 
    <ul> 
    <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
    </ul> 
    </div> 


    <div id="content"> 
    <p class="article">here goes the content</p> 
    </div> 

</body> 
</html>

來源

2012-11-26 t Book

插入的div nav和content一個DIV中，container：

<div id="container"> 
    <div id="nav"> 
     <ul> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p class="article">here goes the content</p> 
    </div> 
</div>`

在你的CSS：

#container { 
    width: 1024px; 
    margin: 0 auto; 
} 
#nav { 
    float: left; 
    width: 100%; 
    height: 250px; 
} 
#content{ 
    float: left; 
    width: 100%; 
}

來源

2012-11-26 13:41:15 Milind

美喜林德，謝謝你的回答。不幸的是，如果我嘗試你的解決方案，內容div會放棄滾動。我想要的是，隱藏瀏覽器滾動。如果bworder調整大小斷開菜單行，則菜單內容和菜單動態變化。和內容總是填充保持身高：多數民衆贊成什麼樣子與你的答案。 html，body { \t margin：0; \t padding：0; \t溢出：隱藏; } .Container {width：1024px; margin：0 auto;} #nav {float：left; width：100％; height：50px;} #nav ul li {list-style-type：none; float：left; margin：0 40px 0 0; } \t #content {overflow：scroll; float：left; width：100％; height：100％;} –

更確切地說，如果它的位置是絕對的，我只能使內容div滾動，但是菜單如果高度不夠，則重疊內容？ –

然後在內容div中添加 'overflow：scroll'並設置高度和寬度的限制您想要 – Milind

css：標題流體高度，但內容可滾動

回答

相關問題