css - 具有固定大小的 sizebar div 和响应中心 div 的屏幕宽容器？

Question

我正在创建一个博客模板，其中的内容(对于桌面查看器)几乎居中。

我想构建一个容器 div 来填充屏幕区域而不产生过多的滚动。在那个 div 容器中，我想要一个固定的 div 在左边(例如 250px)，一个固定在右边(例如 350px)，中间的 div 是响应式的，直到它达到最大宽度 1000px。

这可以用像 calc 这样的函数来完成吗？

Answer 1

calc() 这确实是可能的，通过设置 width: calc(100% - [combined widths]) .
在您的具体示例中，它将是 width: calc(100% - 250px - 350px) .
注意 max-width 仍将发挥作用，以防止中央<div>从超过1000px .

body {
  margin: 0;
}

div {
  height: 100vh;
  float: left;
}

.left {
  background: red;
  width: 250px;
}

.right {
  background: green;
  width: 350px;
}

.center {
  background: blue;
  width: calc(100% - 250px - 350px);
  max-width: 1000px;
}

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>