尽管内部DIV确实如此，但是外部DIV没有拉伸完整的屏幕宽度

Question

堆栈上有类似的问题和一些建议的答案（有些在IE7中不起作用，如设置显示：表格），其他人没有答案所以我希望有人可以解释为什么浏览器呈现以下内容正如他们所做的HTML以及正确的方法。

您可以在以下小提琴中看到工作示例：http://jsfiddle.net/wDeCg/1/

HTML：

<div class="bottom-background-image">
    <div class="site-width">asdfasdfasdf</div>
</div>

CSS：

body {
    background-color:beige;
    margin: 0;
}
.bottom-background-image {
    background-color:green;
}
.site-width {
    margin: 0 auto;
    width: 1024px;
}

这是不需要的结果，即具有绿色背景的父DIV不会按预期拉伸整个宽度。它似乎只占用可用的屏幕宽度。由于内部DIV正在设置宽度，因此没有明确宽度设置的外部DIV应采用内部DIV宽度？ ：

类似的问题：

DIV background not stretching properly

Stretch parent node to its content width

Answer 1

定义您css body min-width:1024px;

body{min-width: 1024px;}

<强> Demo

Answer 2

试试这个

http://jsfiddle.net/wDeCg/3/

.bottom-background-image {
    background-color:green;
    min-width:1024px;
}

Answer 3

试试这个：

body {
    background-color:beige;
    margin: 0;
    width:100%;
}
.bottom-background-image {
    background-color:green;
    width:100%;
    clear:both;
    overflow:auto;
}
.site-width {
    margin: 0 auto;
    width: 1024px;
}