CSS:min-height只适用于高度

Question

我的身体标签上有一个重复的背景图像。只要内容比浏览器窗口短，它就可以正常工作。

代码：

html {
height:100%;
}
body {
background-image:url('images/pattern.png');
background-repeat:repeat;
min-height:100%;
}

当内容对于窗口来说太长，并且我必须向下滚动时，模式直到网站底部才出现。

还有我的例子：http://syrien.wernersbacher.de/

问题：我想要背景模式，即使内容很大。如何修复？

感谢您的任何建议

Answer 1

如果您没有清除浮动，请尝试添加以下CSS以使"#main"容器包装到全高：

#main:after {
    content: "";
    display:table;
    clear:both;
}

如果添加此项，您的"#main"将包装内部元素，并使html包装整个页面

Answer 2

使用float:right; 时，需要清除内容中的浮点

在<div id="content"></div>之后添加一个具有clear:both; 的div

<div style="clear:both;"></div>

Answer 3

您的问题是浮动div#content。浮动元素不会扩展其父元素。一个简单的解决方案是将overflow:auto添加到div#main。body元素不需要(min-)height。