CSS:导航栏扩展到整个页面的高度
CSS:导航栏扩展到整个页面的高度
提问于 2009-10-20 06:04:36
我对CSS不是很在行，但希望这里有人能帮上忙。我有以下样机。(我已经剥离了我的内容，以便于查看)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>我的CSS如下：
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}现在我不确定如何将"navBar“设置为页面高度。我试过增加高度: 100%，但不起作用。
谢谢，马特
回答 3
Stack Overflow用户
发布于 2009-10-19 22:14:22
赋予一个元素height: 100%将使它的高度等于它所包含的元素的高度，在本例中为#body。因为在你的示例中，body的大小和容纳其内容所需的大小一样大，所以#navBar将是该高度的100%。
为了解决这个问题，你可以让#container和#body height:100%和body标签一样高，因为body标签占据了整个页面：
#container {
height:100%
}
#body{
height:100%;
}为了完整起见，您还可以设置#navBar的top和bottom
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */要了解其中的区别，可以尝试使用。使用height和top, bottom, position属性来查看您的更改如何影响布局；只是不要同时使用这两种定位方法！
Stack Overflow用户
发布于 2009-10-19 22:45:39
您的问题似乎是，直到BODY标签的每个父都必须显式地具有100%的高度，以便#navBar DIV具有100%的高度。这意味着您还必须将#body的高度设置为100%，因为它是#navBar的父容器。
Stack Overflow用户
发布于 2009-10-19 22:13:26
看看这个site --我假设你想要一个两栏的布局--这个网站会告诉你如何做你想做的事情。希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1591397
复制相关文章
相似问题
腾讯云开发者
