容器 DIV 未延伸超出窗口的原始高度

发布于 2024-12-20 19:06:48 字数 343 浏览 1 评论 0原文

我将以下 CSS 用于容器 DIV，高度为 html，正文设置为 100%，但它没有延伸到此页面，即当向上滚动以显示页面下方的内容时，容器 DIV 未显示：

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

有人可以告诉我为什么这不起作用。

原文

I am using the following CSS for a container DIV with height of html and body set to 100%, and yet it is not stretching beyond the edge of the window on this page, i.e. when scrolling up to reveal content lower down the page, the container DIV is not showing:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

Could someone please let me know why this isn't working.

分享到QQ

分享到微博

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

发布评论

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

两相知 2024-12-27 19:06:48

将 overflow:hidden 添加到：

#container {
    overflow: hidden; /* Right here */
    background-color: #292929;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    min-height: 100%;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 1200px;
}

这将导致 #container 流过其中浮动元素的底部，从而为其计算出高度。另一种选择是执行 .clearfix。

Add overflow: hidden to:

#container {
    overflow: hidden; /* Right here */
    background-color: #292929;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    min-height: 100%;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 1200px;
}

That will cause #container to flow past the bottom of the floated elements within it that should give it it's calculated height. Another option is to do a .clearfix.

回复收藏 0 原文