html - 尽管内部 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 背景没有正确拉伸

将父节点拉伸到其内容宽度

Answer 1

定义你css的内在body min-width:1024px;

body{min-width: 1024px;}

演示

Answer 2

尝试这个：

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;
}

Answer 3

尝试这个

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

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