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

发布于 2024-08-08 11:01:43 字数 869 浏览 5 评论 0原文

我不太擅长 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% 但这不起作用。

谢谢，马特

原文

Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)

<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>

my CSS is as follows:

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;
}

now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.

Thanks,
Matt

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓦然回首 2024-08-15 11:01:44

给一个元素 height: 100% 会赋予它一个等于其包含元素的高度，在你的例子中是#body。由于示例中的主体大小仅与容纳其内容所需的大小相同，因此#navBar 将是该高度的 100%。

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

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

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

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

要了解差异，请尝试一下与 这个 JS Fiddle。调整 height 和 top、bottom、position 属性，看看您的更改如何影响布局；只是不要同时使用两种定位方法！

Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.

To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:

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

In the interest of completeness, you could also set the top and bottom of #navBar:

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

To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!

回复收藏 0 原文