在纯CSS上调整左侧固定div的居中div的大小

Question

如何使用另一个具有position: fixed属性的div自动调整水平居中的div的大小？

为了更好地理解我的意思，请看下面的图片。 Div A是一个固定大小的固定div，div B是一个水平居中的div。我希望div B以这种方式调整大小（当我调整浏览器窗口大小时），因此A的右边框和B的左边框从不重叠（理想情况下，如果边框之间的距离保持不变。

我知道使用JavaScript通过对resize事件做出反应可以相当容易，但是我想知道有没有办法在纯CSS中实现这一点？

Answer 1

这是另一种方式。这也适用于旧版浏览器。

＆＃13;

＆＃13;

<style>
div {
	border: 1px solid red;
	height: 100px; }

#A {
	position: fixed;
	width: 150px; }

#B {
	margin: 0px 155px; }
</style>

<div id="A">Stuff</div>
<div id="B">Stuff</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为元素提供设置position: absolute或position: fixed您可以使用left和right属性更改元素的宽度。

只需向right添加与left

相同的金额即可

#left {
    position: absolute;
    width: 150px;
}
#middle {
    position: absolute;
    left: 165px;
    right: 165px;
    overflow: auto;
}

/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }

<div id="left"></div>
<div id="middle">
    <div id="overflow"></div>
</div>

Answer 3

这个怎么样：

#a{
    width:200px;
}
#b{
    width:calc(100% - 400px);
}

只需将B的宽度设置为屏幕宽度的100％减去A宽度的两倍，它们的边框就会触及。