css 如何给予div无限宽?

x33g5p2x  于 2023-02-01  发布在  其他
关注(0)|答案(5)|浏览(205)

假设有两个div,A和B。
Div B的宽度为900 px;
屏幕分辨率为500 px;
这将导致水平滚动。
问题是当我向右滚动时,我看到DivA不是真正的100%。
有什么方法可以使DivA始终填充剩余空间?
看这个图像,

添加以下图像以说明问题:

kwvwclae

kwvwclae1#

嗨现在给予你的body min-width:900px;
像这样

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

s3fp2yjn2#

我觉得你错过了浮动:DivA左侧

.DivA{
float: left
width: 100%
}
jei2mxaa

jei2mxaa3#

如果你使用CSS3 -webkit-box-flex属性会有帮助,但问题是,它不能在所有的浏览器上工作。

fnvucqvd

fnvucqvd4#

你不能直接用width:100%来代替DivA吗?这样可以填补空白。另外,两个div都要加上float:left; position:relative

kh212irz

kh212irz5#

问题是:div容器没有扩展到窗口宽度... divA具有自动宽度,因此它将扩展到容器宽度,网格div的最小宽度大于窗口宽度(我认为...在代码中看不到)
我的回答是:
网址:

<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:银色;填料顶部:1em;底部填充:1个字母;}

.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/

相关问题