html - 在位置 : fixed, 之后，另一个容器占用了 100% 的浏览器而不是可用空间

Question

我想创建一个带有 position: fixed 属性的左侧导航栏，以便在我们向下滚动时它会固定在原位。

我有 .fullPage div 和 display: flex 来水平显示这些 div。

当我将 position: fixed 属性添加到 left-navbar 时，第二个 div container-fluid-center 占据了浏览器宽度的 100%而不是 100% 的可用空间。

<div class="fullPage">
    <div class="left-navbar">
                
    </div>
    <div class="container-fluid-center">
                
    </div>
</div>

.fullPage {
  width: 100%;
  height: 100%;
  position: relative;
}
.fullPage .left-navbar {
  width: 88px;
  height: 100vh;
  background: #fff;
  border-right: 1px solid #e4e4e4;
  position: fixed;
}
.fullPage .container-fluid-center {
  width: 100%;
  height: 100vh;
}

Answer 1

根据 MDN documentation , position 设置为 fixed “该元素已从正常文档流中删除，并且不会在页面布局中为该元素创建空间。”。

为了解决你的问题，你可以给 .container-fluid-center 一个 margin-left: 88px;，这样它就不会“重叠”使用 .left-navbar