假设有两个div,A&乙
Div B的宽度为900px;
屏幕分辨率为500px;
这会导致水平滚动。
问题是当我向右滚动时,我发现DivA并非真正100%。
有什么方法可以让DivA总是填补余地?
见图片,
添加以下图片以解释问题:
答案 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">
</div>
<div class="divGrid">
</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/