如何为div赋予无限宽度？

Question

假设有两个div，A和B。

Div B的宽度为900px；

屏幕分辨率为500像素；

这将导致水平滚动。

问题是，当我向右滚动时，我发现DivA并不是真正的100％。

有什么方法可以使DivA始终填充剩余空间？

查看图片，

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9pbzRCNS5wbmcifQ==” alt =“在此处输入图像描述”>

添加下图以说明问题：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9qWU11WS5wbmcifQ==” alt =“在此处输入图像描述”>

Answer 1

您好，现在给您的body min-width:900px;

像这样

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

Answer 2

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

.DivA{
float: left
width: 100%
}

Answer 3

如果使用CSS3 -webkit-box-flex属性，它将有所帮助。但是问题是，它不能在所有浏览器上运行。

Answer 4

您不能仅将width:100%用于DivA吗？它将填充空白。此外，为两个div添加float:left; position:relative。

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：表格{/ *仅显示表单不会扩展，如果您需要扩展//将答案行移至此类* /背景颜色：银色；padding-top：1em；padding-bottom：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/