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。您的(min-)height元素不需要body。