100vh 页面/视口容器中的内容溢出

问题描述 投票:0回答:1

我正在尝试制作一个带有静态高度和顶部菜单的侧边栏的布局。问题是顶部的菜单将内容从页面视图中向下推出。内容在底部看不到。我认为解决方案可能是使侧边栏缩小以适应高度,但我不知道该怎么做。

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>
css flexbox
1个回答
0
投票
.sidebar {
  width: 300px;
  height: fit-content;
  background: blue;
  overflow-y: scroll;
}

这就是你的意思,或者你可以将“fit-content”更改为100%和overflow-y:滚动并不是真正需要的,除非你想要它希望这会有所帮助

© www.soinside.com 2019 - 2024. All rights reserved.