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

Question

请看一下这个小提琴，并附上解释： 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;
}