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：标题流体高度，但内容可滚动

回答

相关问题