html - 使用 calc() 时，宽度继承不会填充父级

Question

我试图让一个 div 扩展到父级的宽度。父对象上有一个 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 有一个固定的位置，所以它的宽度是相对于窗口/屏幕宽度的，并且由于 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>