1

我有一个名为“主容器”的 div，我想成为我内容的高度。目前，该 div 仅与我的浏览器窗口一样高。我试图像这样纠正这个：

html, body{
  height: 100%;
  background-color: $main-background-color;
}

#main-container {
  width: 1024px;
  height: 100%;
  background-color: darken($main-background-color, 5%);
}

不幸的是，这不起作用。我也试过：

#main-container {
  width: 1024px;
  min-height: 100%;
  height:auto !important;
  background-color: darken($main-background-color, 5%);
}

这也没有效果。我还重新设计了我的布局，不使用浮动，但这并没有解决问题。在网上搜索后，我没有找到任何其他有效的解决方案。还有其他人有想法吗？

另外，我不知道这是否会影响事情，但我正在使用 Rails 3。

4

3 回答 3

2

在#main-containerdiv 的底部，插入以下代码：

<div id="push"></div>

然后在您的 CSS 中，添加以下内容：

#push {
    clear:both;
}

然后，这应该将整个容器推到内容的高度，而不考虑浮动 div。

于 2012-07-07T01:50:47.743 回答
1

我可能误解了您要完成的工作。但是如果你想要的只是让你的 div 成为内容的高度，那么就不要声明高度......

html, body{
  background-color: $main-background-color;
}

#main-container {
  width: 1024px;
  background-color: darken($main-background-color, 5%);
}
于 2012-07-07T08:51:32.800 回答
0

尝试设置min-height:100%而不是height在 html/body 上设置，因为这height:100%会将其大小限制为视口。main-container然后，当高于视口时，您应该能够拉伸它。

html, body{
  min-height: 100%;
  background-color: $main-background-color;
}

#main-container {
  width: 1024px;
  background-color: darken($main-background-color, 5%);
}
于 2012-07-07T07:43:58.083 回答