当 window 调整大小时，如何使特定元素最后减少？

Question

我正在尝试创建一个中央内容框，其功能实际上与 Whosebug 的功能相同。如果用户通过拖动浏览器的边缘来缩小 window 大小，则页面的主要内容只有在页边距和其他元素被缩小后才会缩小。

所以我的 HTML:

<div class="navbar">
<div>Title</div>
<a href="index.html">Home</a>
<a href="filler1.html">filler1</a>
<a href="filler2.html">filler2</a>
</div>


<div class="content">
 testing123
</div>

我的 CSS:

body {
margin:0; // Because I have a navigation bar at the top that wouldn't quite reach
// the full length of the page
margin-top: 100px; //to stop other elements covering the navigation.
background-color: #ffffee
}

.content {
background-color: white;
overflow-wrap: break-word;
border: 3px solid rgb(0, 0, 0);
padding: 20px;
position: relative;
max-width: 1500px;
min-width: 1500px;
left: 100px;
}

谢谢。

Answer 1

只需给它一个最大宽度并将其居中：

.content {
    ...
    margin: 20px auto;
    max-width: 400px;
}

Demo

当 window 调整大小时，如何使特定元素最后减少？

How can I make a particular element last thing to be reduced when the window is resized?

html

css

margin