html - Stop elements from shifting when resizing window

Question

I've built a header bar for my page. It consists of the element and inside are some elements, , . I can lay everything out nicely but when I resize the browser window everything starts to move and overlap in the header. Giving the header, or even the body a fixed with like "width: 1000px" solves this, but that is screen-size dependent.

How can I have my page such that any resizing of the browser window causes scroll bars to appear to view the hidden content, and where this would NOT be dependent on a hard-wired resolution in pixels.

Answer 1

给你的主 div（通常是你的 wrap div）一个min-width: ...px.

像这样：

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

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

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

如果屏幕大于 900 像素，则 div 将具有 95% 的宽度。