html - 阻止 Div 缩小到流体布局中的内容

Question

我的响应式网站上有一个居中的 div (#content)，可以根据浏览器窗口调整大小，如下所示:

<div id="container">
  <div id="content">
    <p>Here is some sample text.</p>
  </div>
</div>

#container {
  width: 100%;
}

#content {
  max-width: 805px;
}

它有效，除非 #content 中的内容没有占用足够的水平空间来将 div 的宽度推到我设置的最大宽度。例如，我的其中一个段落标签之间内容很少的页面不是 805 像素，而是 740 像素。

我尝试将 width: 100% 添加到 #content，但这会阻止 div 调整大小。

解决此问题的最佳方法是什么？我需要使用媒体查询吗？

Answer 1

我找到了答案。我确实需要 width: 100%，但我还需要 box-sizing: border-box，然后我需要将添加的填充宽度包含到 最大宽度，像这样:

#content {
  box-sizing: border-box;
  width: 100%;
  max-width: 885px;
  padding: 40px;
}