Question

鉴于这种简化的布局：

<div id="container" style="width:calc( 100% - 200px); height:600px; background-color:blue; overflow-x: auto; overflow-y: hidden;">

<div style="width:1000px; height:200px; background-color: green;"></div>

<div style="width:auto; height:100px; background-color: red;"></div>

</div>

在大屏幕上，红色占据蓝色容器的整个宽度，不需要滚动条。

在小屏幕上，蓝色容器变得可滚动，红色仍然显示占据蓝色容器的整个宽度。但是一旦滚动，我们可以看到红色实际上在绿色之前中断了。

红色始终是否有可能占用蓝色容器的整个宽度，无论屏幕尺寸如何，甚至滚动一次？

小提琴：https://jsfiddle.net/spjnzwto/1/

编辑：提供的固定宽度值仅作为示例，不一定是静态的。

Answer 1

Javascript可以做到这一点:)看下面的例子。红色div从蓝色divs scrollwidth获得宽度。

＆＃13;

document.getElementById('red').style.width = document.getElementById('blue').scrollWidth + 'px';

＆＃13;

<div style="width:calc( 100% - 200px); height:600px; background-color:blue; overflow-x: auto; overflow-y: hidden;" id="blue">

<div style="width:1000px; height:200px; background-color: green;" id="green"></div>

<div style="height:100px; background-color: red;" id="red"></div>

</div>

＆＃13;

小提琴：https://jsfiddle.net/spjnzwto/6/

使用它也可以用于窗口调整大小。 <body onresize="document.getElementById('red').style.width = document.getElementById('blue').scrollWidth + 'px'">

或者您可以使用javascript ...

使用eventlistener

Answer 2

你写道：＆＃34;无论屏幕大小是什么，红色都可以占据蓝色容器的整个宽度，甚至滚动一次？＆＃34;

实际上答案很简单，不需要Javascript：是的，请width: 100%;和min-width:1000px;

https://jsfiddle.net/bvqpuz48/2/

CSS - Div始终匹配容器宽度，即使容器水平滚动

2 个答案: