使用 calc() 时，宽度继承不会填充 parent

Question

我正在尝试使 div 扩展到 parent 的宽度。 parent 上面有一个 calc()。为什么 child 没有扩展到 parent 的宽度？如果我删除 calc 并设置一个实际值，它就可以正常工作。有什么技巧可以让它发挥作用吗？

我假设 child 也是运行 calc(100% - 200px)

* {
  box-sizing: border-box;
}

.wrapper {
  width: 75%;
  margin: auto;
  position: relative;
}

.nav {
  width: calc(30% - 16px);
  height: 2000px;
  position: relative;
  background: red;
}

.nav>ul {
  width: inherit;
  background: blue;
  position: fixed;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="nav">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

Answer 1

根据以上评论，我将详细说明。很明显 ul 从其父级继承了 calc(30% - 16px) 并且两者的计算不同，这是逻辑：

nav 有一个静态位置，所以他的宽度是相对于它的容器的，这里是 .wrapper，这个的宽度是它的容器的 75%，也就是主体，所以导航的最终宽度是 (width-body*0.75)*0.3 - 16px.

ul 有一个固定的位置，所以它的宽度是相对于 widow/screen 宽度的，因为 body 默认有 8px 边距，body 的宽度与浏览器宽度略有不同，我们可以说 browser-width=width-body + 16px，因此 ul 的宽度是 (width-body + 16px)*0.3 - 16px.

所以我们可以清楚地看到ul的宽度比nav的宽度大。

为了解决这个问题，我们需要求解方程：

(width-body + 16px)*0.3 - 16px = (width-body*0.75)*0.3 - 16px

但这不是适当的解决方案，因为我们将以 唯一的负值 (-64px) 结束，这是不可能的！

另一个想法是调整固定元素的宽度。

让我们首先删除主体边距以简化操作，我们将得到新的等式：

(width-body)*0.3 - 16px = (width-body*0.75)*0.3 - 16px

现在我们只是缺少 0.75 因素，所以我们可以简单地添加它。

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 75%;
  margin: auto;
  position: relative;
}

.nav {
  width: calc(30% - 16px);
  height: 2000px;
  position: relative;
  background: red;
}

.nav>ul {
  width: calc((30% * 0.75) - 16px);
  background: blue;
  position: fixed;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="nav">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

顺便说一下，我怀疑你想拥有与sticky 位置相同的行为，所以你可以尝试一下。只需关注browser support:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 75%;
  margin: auto;
  position: relative;
}

.nav {
  width: calc(30% - 16px);
  height: 2000px;
  position: relative;
  background: red;
}

.nav>ul {
  background: blue;
  position: sticky;
  top:0;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="nav">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

使用 calc() 时，宽度继承不会填充 parent

width inherit doesn't fill parent when using calc()

html

css

css-calc