Question

我知道这很容易用2个div来完成，外面的一个设置为100％宽度，内部一个设置为max-width 1000px。

我只是好奇，如果只用一个div而不是两个div。

Answer 1

是的，这是可能的，

因为html元素永远不会只是100％＆＃39;它必须是100％的其他东西。它与包含它的第一个元素100％相关，它具有相对位置，绝对位置或固定位置。或100％与窗口相关。

当周围容器（可能是窗口）的长度大于1000px时，max-width将取代宽度。

检查下面的代码段。如果您在完整窗口视图中调整窗口大小，则不会有滚动条。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有时我需要这样做，我使用“计算填充”。例如：

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

你不推荐使用它，因为它对响应式设计不是很友好，因为你需要设置相当多的媒体查询来适应它。