如何有效地相对于固定的垂直导航栏分隔HTML元素？
我试图模仿Twitter的垂直导航栏。导航栏固定在窗口左侧的适当位置，当用户滚动浏览其提要时，随着窗口变窄，导航栏会进行调整 目前，我已经使用EJS页眉和页脚将我的项目分为仪表板（导航栏）部分和主部分。然后，我将仪表板的宽度设置为等于主面板左侧的边距。这创建了我想要的一般效果，但它似乎效率低下，因为我需要更改两个属性。是否有某种方法可以将主部分相对于仪表板进行定位，以便在我更改仪表板宽度时，主部分将相应地进行调整，而不会留下更改页边距 HEADER.ejs如何有效地相对于固定的垂直导航栏分隔HTML元素？,html,css,bootstrap-4,position,navbar,Html,Css,Bootstrap 4,Position,Navbar,我试图模仿Twitter的垂直导航栏。导航栏固定在窗口左侧的适当位置，当用户滚动浏览其提要时，随着窗口变窄，导航栏会进行调整 目前，我已经使用EJS页眉和页脚将我的项目分为仪表板（导航栏）部分和主部分。然后，我将仪表板的宽度设置为等于主面板左侧的边距。这创建了我想要的一般效果，但它似乎效率低下，因为我需要更改两个属性。是否有某种方法可以将主部分相对于仪表板进行定位，以便在我更改仪表板宽度时，主部分将相应地进行调整，而不会留下更改页边距 HEADER.ejs <body> <d
<body>
<div class="dashboard bg-dark">
<div class="container dash-title">
<h1 class="display-5">Poetica</h1>
<p class="font-secondary subtitle">No one has to know how bad you suck at poetry.</p>
</div>
<div class="container">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-white" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/compose">Compose</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="main-div">
</div>
</body>
</html>
.dashboard {
height: 100%;
width: 12rem;
position: fixed;
}
.main-div {
margin-left: 12rem;
}