html - 不扩展 html 正文或父元素的子元素

Question

请看一下这个 fiddle 来解释: http://jsfiddle.net/Br3jz/1/我在包含的 div 上设置了背景样式，我希望这个背景始终填满整个屏幕。我有内部 .containers 居中并且固定在 1064px 处。当设备宽度小于 1064px 时就会出现问题。

发生这种情况时，包含的 div 以及 HTML body 元素都停留在原始设备宽度。为什么会发生这种情况，我该如何解决？

Answer 1

问题是 #main 不想比它的父级有更多的宽度，所以它有一个流动的宽度。但是.container的宽度是固定的，可以比#main的宽。在这种情况下，它会溢出。

您有两种可能的解决方案，具有不同的效果:

解决方案 1:Demo

使用

代替 width: 1064px

.container {
    max-width: 1064px;
}

解决方案 2:Demo

.container {
    width: 1064px;
}
#main {
    min-width: 1064px;
}