我正在尝试为此找到 css 解决方案。我的页面顶部有一个列表菜单,下面是一个包含内容的 div。内容 div 应始终具有 100% 的剩余视口高度。浏览器滚动条应该被隐藏,内容 div 应该有滚动条。直到这里没有问题。为此,我给出了内容 div 位置:绝对值和最高值。
我知道的问题是,如果用户调整浏览器的大小,菜单会换行,并且菜单会与内容重叠,因为内容有一个固定的“顶部”值。
一种解决方案是在浏览器调整大小时读取菜单 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>