如何为div提供无限宽度?

时间:2012-09-25 11:00:25

标签: html css width

假设有两个div,A&乙

Div B的宽度为900px;

屏幕分辨率为500px;

这会导致水平滚动。

问题是当我向右滚动时,我发现DivA并非真正100%。

有什么方法可以让DivA总是填补余地?

见图片,

enter image description here

添加以下图片以解释问题:

enter image description here

5 个答案:

答案 0 :(得分:0)

您好,现在就提供给您body min-width:900px;

就像这样

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

答案 1 :(得分:0)

我认为你错过了漂浮:DivA的左边

.DivA{
float: left
width: 100%
}

答案 2 :(得分:0)

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

答案 3 :(得分:0)

你不能只使用width:100%进行DivA它将填补空白区域。此外,为两个div添加float:left; position:relative

答案 4 :(得分:0)

问题是: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/