调整窗口大小时阻止元素移动

Question

我已经为页面建立了标题栏。 它由元素组成，内部是一些元素。 我可以很好地布局所有内容，但是当我调整浏览器窗口的大小时，所有内容开始移动并在页眉中重叠。 给标题，甚至正文一个固定为“ width：1000px”的像素都可以解决此问题，但这取决于屏幕尺寸。

我该如何设置页面，以使浏览器窗口的任何大小调整都可以显示滚动条以查看隐藏的内容，并且该位置不取决于以像素为单位的固定分辨率。

Answer 1

给您的主div（通常是环绕div）一个min-width: ...px 。

像这样：

<div class="wrap">
    <div class="header">...</div>
    <div class="content">...</div>
</div>

.wrap {
     width: 95%;
     min-width: 900px;
}

在上面的示例中，包装div始终将至少为900px。 当窗口调整为较小的宽度时，将显示滚动条。

如果屏幕大于900px，则div的宽度为95％。