1

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

我假设孩子也在跑步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>

4

1 回答 1

1

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

thenav有一个静态位置，所以他的宽度是相对于它的容器的，这里是 the .wrapper，这个的宽度是它的容器的 75%，它是 body，所以 nav 的最终宽度是(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职位具有相同的行为，以便您可以尝试。只需注意浏览器支持：

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>

于 2018-02-27T21:12:15.637 回答