容器 DIV 没有超出窗口的原始高度答案

【问题标题】：Container DIV is not stretching beyond original height of window容器 DIV 没有超出窗口的原始高度
【发布时间】：2011-12-13 07:51:26
【问题描述】：

我将以下 CSS 用于容器 DIV，其高度为 html，正文设置为 100%，但它并未延伸到 this page 上的窗口边缘之外，即向上滚动以显示内容下方时页面，容器 DIV 未显示：

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

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

【问题讨论】：

您要么需要在#content 的底部添加clear: both 元素，要么将overflow: auto; 添加到#container 样式块中。（注意，您可以将overflow: auto 添加到.container，但您必须处理滚动条；此外，#container 修复也不完美，因为float: right 框不会扩展@ 987654331@在它的底部。）
@JaredFarrish，你应该这样回答。
实际上，在#container 样式定义中添加overflow: hidden 可以解决问题。
@FakeRainBrigand - 我还没搞定。 :)

标签： css height

【解决方案1】：

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

【讨论】：

谢谢，这解决了容器的问题。出于某种原因，侧边栏现在在底部被切断了。可能与您的回答无关，但如果您对为什么会发生这种情况有任何线索，我会很高兴听到他们的消息！
您可以将padding-bottom 定义添加到#container 和#sidebar。看起来 35px 和 20px 分别会很好。
再次感谢贾里德。这很好用。享受你的一天/晚上。

【解决方案2】：

你应该使用高度，而不是宽度：

height: 1200px;

代替：

width: 1200px;

【讨论】：

我不知道你从哪里得到这个想法，但这不是问题所在。
我不认为那是他要找的东西