調整窗口大小時阻止元素移動

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％。