有 2 个固定的(不能更改)内联 block 和它们的最小宽度。当我试图调整窗口大小时(宽度小于最小值),它们相互重叠。有什么建议吗?如何设置整个页面的最小宽度?
<div style="position:fixed;left:0;top:0;bottom:0;width:40%;min-width:500px;border:2px solid red;margin:5px;"> </div>
<div style="position:fixed;right:0;top:0;bottom:0;width:40%;min-width:500px;border:2px solid blue;margin:5px;"> </div>
最佳答案
简短的回答是不,而不是不改变那个position: fixed
看看 position: fixed
的实际含义:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
而且由于您无法控制视口(viewport)的宽度...
绝对位置应该可以,然后你可以将你的 body 设置成这样:
body {
min-width: 1020px;
position: relative;
min-height: 100%;
}
html{
height: 100%;
}
关于css - 如何保持内联 2 个具有最小宽度的固定元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29710489/