Question

我正在尝试将div扩展为父级的宽度。父母有一个calc()。为什么孩子没有扩展到父母的宽度？如果我删除calc并设置实际值，它可以正常工作。是否有一些技巧可以让它发挥作用？

我认为孩子也在运行calc(100% - 200px)

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

基于上述评论，我将详细阐述。很明显，ul从其父级继承了calc(30% - 16px)，两种计算都是不同的逻辑：

nav有一个静态位置，所以他的宽度是相对于它的容器而来的是.wrapper，这个宽度是75％来自它的容器，这是最终的宽度导航是 (width-body*0.75)*0.3 - 16px 。

ul有一个固定的位置，因此它的宽度相对于寡妇/屏幕宽度而且由于身体默认有8px的边距，因此身体的宽度与浏览器宽度略有不同，我们可以说{{ 1}}因此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>位置相同的行为，所以你可以尝试一下。只需注意browser support：

sticky

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;
}

使用calc（）时，width inherit不会填充父级

1 个答案: