Html 位置：修复后，另一个容器占据了浏览器的100%，而不是可用空间

我想创建一个带有position:fixed属性的左侧导航栏，这样当我们向下滚动时，它就会固定在适当的位置

我有

.fullPage

div，用

display:flex

水平显示这些div

当我将

position:fixed

属性添加到

左侧导航栏

时，第二个div

容器流体中心

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

.整页{
宽度：100%；
身高：100%；
位置：相对位置；
}
.整页.左导航栏{
宽度：88px；
高度：100vh；
背景：#fff；
右边框：1px实心#e4；
位置：固定；
}
.整页.容器流体中心{
宽度：100%；
高度：100vh；
}

当您给

位置时：固定
到
。左侧导航栏

position:fixed
元素不会在页面中它通常所在的位置留下间隙

所以你需要
.fullPage.container fluid center
给出这样的宽度

.fullPage .container-fluid-center {
  width: calc(100% - 88px);
  height: 100vh;
}

因此，它可以根据您的需要进行操作，位置设置为“固定”
“元素将从正常文档流中删除，页面布局中不会为元素创建任何空间。”

为了解决您的问题，您可以给
。容器流体中心
一个
左边距：88px，这样它就不会与
重叠。左导航栏
您可以给
。容器流体中心
a
左边距：88px
以这种方式
。容器流体中心
宽度将减小，但元素仍将从页面的左边距开始渲染，因此它仍将与
重叠。左侧导航栏
在这里您可以看到我的意思：