css - 如何使 aside 具有剩余区域的宽度？

Question

我有一个简单的页面，左边有内容，还有一个 aside在右侧。我想要 div在左边是容器宽度的 70% 然后是 aside占用剩余的空间，但我不知道如何给它一个可变的宽度。

我试过设置 aside 的宽度为 30%，但这不会为我想要的 div 之间的 24px 空间留出任何空间。和 aside .我还尝试将边距的宽度设置为 28% 并使其接近，但我认为有一种更精确的方法。

这是一个简单的例子:

.container {
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
}
.right {
  background-color: white;
  width: 28%;
  height: 100%;
  float: right;
}

<div class="container">
  <div class="left"></div>
  <aside class="right"></aside>
</div>

Answer 1

无需进入 Sass，您可以使用 CSS calc(); 函数。

请注意，在下面的 CSS 中，我保留了 28% 的值，以便在不支持 calc() 的旧版浏览器上正常降级 (旧版 Android 浏览器、Opera Mini 和 IE8 -)。

实例 here .

.container {
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
}
.right {
  background-color: white;
  width: 28%;
  width: calc(30% - 24px);
  height: 100%;
  float: right;
}