外DIV不伸展到屏幕的最大宽度，虽然内DIV [英] Outer DIV not stretching full WIDTH of screen although inner DIV does

问题描述

有类似的问题堆栈与一些建议的答案（一些不工作在IE7像设置显示：表），其他人没有答案，所以我希望有人可以解释为什么浏览器呈现以下HTML，因为它们和正确的方法。

您可以在以下小提琴处看到工作示例：

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

解决方案

strong>定义您的 css in body min-width：1024px;

  body {min-width：1024px;} 
  

演示

There are similar questions on stack with some suggested answers (some don't work in IE7 like settings display:table), others don't have answers so I'm hoping someone can explain why browsers render the following HTML as they do and what the proper approach is.

You can see the working sample at the following fiddle: http://jsfiddle.net/wDeCg/1/

The HTML:

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

The CSS:

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

Here's the unwanted result, which is that the parent DIV with a green background doesn't stretch the full width as expected. It seems to only take up the available screen width. Since the inner DIV is setting the width surely the outer DIV with no explicit width set should adopt the inner DIVs width? :

Similar questions:

DIV background not stretching properly

Stretch parent node to its content width

解决方案

Define your css in you body min-width:1024px;

body{min-width: 1024px;}

Demo

这篇关于外DIV不伸展到屏幕的最大宽度，虽然内DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！