Question

如何使NavWrapper的宽度与父级相同？

我希望这些链接处于固定位置，即使主要部分溢出。

我知道如何在没有Flex的情况下做到这一点。有没有纯CSS方法呢？

body {
  padding:0;
  margin:0
}
.wrapper {
  display: flex;
}
nav { 
  flex: 1 1 150px;
  background: gray;
}
.nav-wrapper {
  width: 100%;
  position: fixed;
  top: 0; left: 0;
  display:flex;
  flex-direction: column;
}

.nav-wrapper a {
  flex: 1 1;
  border: 1px solid red;
}
section {
  flex: 5 1 500px;
  padding: 20px;
}

<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
         <a href="#">Home</a> 
         <a href="#">About</a> 
    </div>
  </nav>
  <section>
    <p>Lorem</p>
  </section>
</div>

Answer 1

您不需要fixed位置 - 您可以在查看以下示例后看到我这样说的原因：

移除fixed定位并将height: 100vh添加到nav：

nav {
  flex: 1 1 150px;
  background: gray;
  height: 100vh;
}

现在将一个部分的内容包装到位于inner的{{1}} div中，如下所示：

absolute

这将允许section { flex: 5 1 500px; padding: 20px; position: relative; overflow-y: auto; } .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }保持section的{{1}}，额外的高度将会溢出。

100vh

nav-wrapper

检查一下，让我知道您的反馈。谢谢！

将“Position：fixed”div的宽度设置为父div（flexbox项）

1 个答案: