个人中心
gpt4 book ai didi

CSS:导航栏扩展到整个页面高度

转载 作者：行者123 更新时间：2023-11-28 11:18:19 26 4
gpt4 key购买 nike

我不太擅长 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”成为页面高度。我试过添加 height: 100% 但这不起作用。

谢谢，马特

最佳答案

给一个元素 height: 100% 将给它一个等于它的包含元素的高度，在你的例子中是#body。由于您的示例中的正文只是容纳其内容所需的大小，因此 #navBar 将是 that 高度的 100%。

要解决此问题，您可以使 #container 和 #body height:100% 使它们与 body 标签一样高，占据整个页面:

#container {
    height:100%
}
#body{
    height:100%;
}

为了完整起见，您还可以设置#navBar 的top 和bottom:

position: absolute; 
top: 20px; 
bottom: 60px; /* height of footer */

要了解差异，请使用 This JS Fiddle .调整 height 和 top, bottom, position 属性，看看你的改变是如何影响布局的；只是不要同时使用这两种定位方法!

关于CSS:导航栏扩展到整个页面高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1591397/

26 4 0
文章推荐： Jquery DatePicker 在文本框的背面加载 - css 问题
文章推荐： html - 尝试将内容置于任何浏览器的中心
文章推荐： css - 这是哪个 CSS 错误？ (底部边距，ie6 + ie7)
文章推荐： CSS 错误或 IE 兼容性问题？