Question

我的网页遇到了一些问题。一张图片可能最好地描述它，所以这里是：

http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png

底部的文字应该在白色区域内。我希望白色div根据内容改变高度。我有一个div将中间的白色区域居中：

#mainContainer {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 800px;
  min-height: 700px;
  height: 100%;
}

我还将html和body设置为100％。但问题是，无论有多少内容，div都保持在100％。现在，当我将高度设置为auto时，会发生一件非常奇怪的事情：

http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png

它应该是什么样子（以及它看起来如何使用高度：100％）：

http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png

The full page can be found here（点击“Om oss”查看错误放置文字的页面）

如果有人能弄明白问题是什么，我真的很感激！ :-)
（希望CSS和HTML很容易理解）

编辑：我刚刚注意到它在Safari中正常呈现，但在Firefox中却没有。

Answer 1

你给html和body的高度为100％。（许多儿童div也有身高：100％。）这意味着它们是视口的100％，而不是内容。 IOW，它们受到浏览器窗口高度的限制，任何在此下方延伸的内容都将超出所有应用的背景。

编辑：为了进一步说明，您已经在尝试使用高度拉伸的空div上左右两侧设置了背景图像（阴影）：100％，但是因为它们确实如此不包含任何东西，它们只能是父元素的高度，它们本身就是veiwport的高度。当你将html和body（或任何其他中间元素）设置为height：auto时，这些div（mainContainer-middle-left和-right）会折叠到其内容的大小，这是什么。

您应该重新配置html，以便这些元素是实际内容的父级，并删除所有“height：100％”语句。它们并不代表你认为它们的含义！

Answer 2

了Stian，

对于div #mainContainer，将高度设置为auto。

对于div＃mainContainer-middle，将高度设置为550px。

这应该可以解决您的布局问题。

CSS - 内容出现在div之外

2 个答案: