我的问题是,如果用户调整浏览器的大小,菜单会制动一个新行,并且菜单会重叠内容,因为内容有一个修复“top”值。
一种解决方案是在浏览器调整大小时读取菜单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>
答案 0 :(得分:0)
在一个div nav
中插入div content
和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%;
}