Question

我有一个名为'main-container'的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。

Answer 1

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

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

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

#push {
    clear:both;
}

然后，无论浮动div如何，都应将整个容器推送到内容的高度。

Answer 2

我可能误解了你想要完成的事情。但是，如果你想要的只是你的div是内容的高度，那么就不要声明一个高度......

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

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

Answer 3

尝试在html / body上设置min-height:100%而不是height，因为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%); }应该能够拉伸它。

{{1}}

将Div设置为Body的100％

3 个答案: