我正在尝试制作一个带有静态高度和顶部菜单的侧边栏的布局。问题是顶部的菜单将内容从页面视图中向下推出。内容在底部看不到。我认为解决方案可能是使侧边栏缩小以适应高度,但我不知道该怎么做。
https://codesandbox.io/p/sandbox/menu-layout-6sg8c7
#root {
display: flex;
height: 100vh;
flex-direction: column;
}
.main-menu {
width: 100%;
height: 40px;
flex-shrink: 0; /* without this, menu shrinks and the sidebar isn't pushed out of view */
background: green;
}
.content {
display: flex;
flex-grow: 1;
}
.sidebar {
width: 300px;
height: 100vh;
background: blue;
overflow-y: scroll;
}
.filler-content {
background: white;
height: 500px;
margin: 10px;
}
HTML
<div id="root">
<div class="main-menu"></div>
<div class="content">
<div class="sidebar">
<div class="filler-content">Box Element</div>
<div class="filler-content">Box Element</div>
<div class="filler-content">Box Element</div>
</div>
</div>
</div>
.sidebar {
width: 300px;
height: fit-content;
background: blue;
overflow-y: scroll;
}
这就是你的意思,或者你可以将“fit-content”更改为100%和overflow-y:滚动并不是真正需要的,除非你想要它希望这会有所帮助