可以有 100% 宽的 div 但将其内容限制为设定的最大宽度吗？

Question

我知道这可以很容易地用 2 个 div 来完成，例如将外部的设置为 100% 宽度，内部的设置为最大宽度 1000px。

我只是好奇是否可以只用一个 div 而不是两个来完成。

Answer 1

是的，这是可能的，

因为 html 元素永远不会“只是 100%”。它必须是 100% 的其他东西。它要么与包含它的第一个具有相对、绝对或固定位置的元素 100% 相关。或者说100%与窗户有关。

当周围容器（可以是窗口）大于 1000px 时，最大宽度将取代宽度。

检查下面的片段。如果在全窗口视图中调整窗口大小，将不会出现滚动条。

.testwidth {
  background: yellow;
  height: 100px;
  max-width: 1000px;
  width: 100%;
}

<div class="testwidth">heyho</div>

Answer 2

有时我需要这样做，我使用“calc padding”。例如：

.element {
  width: 100%; 
  padding-right: calc(100% - 1000px); 
  box-sizing: border-box;
}

我不建议使用它，因为它对于响应式设计不太友好，因为你需要设置相当多的媒体查询来适应它。

Answer 3

这是一个基于@Erik Ragnar Eliasson 答案的示例。切换到全页查看效果。

当页面宽度低于内容宽度时，padding 计算值变为负值，但由于负的 padding 值无效，因此 padding 将设置为 0，内容宽度将恢复为页面宽度。

要使内容居中对齐，请将计算值除以左右填充。

示例中的内层div只是为了展示效果，对布局没有贡献。

.outer {
  --content-width: 1000px;
  
  background-color: blue;
  box-sizing: border-box;
  padding-right: calc(100% - var(--content-width));
  width: 100%;
}

.inner {
  background-color: red;
}

<div class="outer">
  <div class="inner">
    Contents here
  </div>
</div>