html - 如何给div无限宽度？

Question

假设有两个 div，A 和 B。

Div B 的宽度为 900px；

屏幕分辨率为500px；

这将导致水平滚动。

问题是当我向右滚动时，我看到 DivA 并不是 100%。

有什么方法可以让 DivA 总是填满剩余空间？

看图，

添加以下图像以解释问题：

Answer 1

如果您使用 CSS3 -webkit-box-flex 属性，它会有所帮助。但问题是，它不适用于所有浏览器。

Answer 2

难道你不能只width:100%用于 DivA 它会填补空白。此外，float:left; position:relative为两个 div 添加。

Answer 3

嗨，现在给你的body min-width:900px;

像这样

body{
min-width:900px;  // total width of your wraper as like wraper width 
}

Answer 4

我认为您缺少浮动：DivA 的左侧

.DivA{
float: left
width: 100%
}

Answer 5

问题是： div 容器没有在窗口宽度上扩展... divA 具有自动宽度，因此它将扩展到容器宽度，网格 div 的最小宽度大于窗口宽度（我认为...在代码中看不到）

我的回答是：

html:

<h1>Child Expand Test</h1>
<form action="#">
    <div class="divContainer">
        <div class="divA">
            &nbsp;
        </div> 

        <div class="divGrid">
            &nbsp;
        </div>
    </div>
</form>

CSS: form { /* 只是为了显示表单没有展开，如果需要展开它//将答案行移到这个类 */ background-color: silver; 填充顶部：1em；底部填充：1em；}

.divContainer {
    display: inline-block; /* this is the answer line, to expand over the window width */
}

.divA { /* this div will expand over the window width */
    background-color: red;
}

.divGrid {
    background-color: blue;
     min-width: 1500px; /* This is the reason why its needed, yo expand one child width over the size of the window */
}

这是一个小提琴：http: //jsfiddle.net/bjb7drdm/