垂直滚动不适用于屏幕大小

Question

我正在尝试在 flexbox 菜单中实现用户滚动。当我将导航设置为 px 的高度（例如 100px）时，我意识到一些奇怪的事情它会工作得很好，但是当我设置 100% 高度时，它会创建一个全局滚动如果space 不够，我的菜单不适合屏幕大小。我已经创建了两个关于这个问题的代码笔：

100% 导航高度（滚动不起作用）-

https://codepen.io/Shalev1104/pen/oNGYGgX

px 高度（工作卷轴）-

https://codepen.io/Shalev1104/pen/KKXNXdB

*它们之间的唯一区别是我的 <nav>.

内的高度属性

如果你不明白，我需要一个 100% 屏幕的垂直菜单，在所有可用的 space 内有一个垂直滚动条。

很高兴得到你的帮助

Answer 1

百分比是相对测量值（如 100% 的...什么？）。确保导航上方的每个父元素也定义了高度。

例如，如果您的网站结构如下：

<html>
  <body>
    <ul class="nav">...</ul>
  </body>
</html>

那么以下 CSS 可能会解决您的问题：

html, body, ul.nav { height: 100%; }

编辑：这是更新和清理的版本（HTML 和 CSS）：

<html>
  <body>
    <ul class="nav sidebar">
      <li class="nav-item sidebar-top">
        <div class="input-group">
          <input type="search" class="form-control" placeholder="Search Chat" />
          <button class="btn btn-secondary" type="button">Search</button>
        </div>
      </li>
      <li class="nav-item sidebar-middle">
        <nav>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
        </nav>
      </li>
      <li class="nav-item sidebar-bottom">
        <div class="d-flex justify-content-between align-items-center px-3">
          <div>
            <img src="https://www.jquery-az.com/html/images/banana.jpg" class="rounded-circle" width="50" height="50" alt="profile" />
            <span class="ms-2">User 1</span>
          </div>
          <button class="btn bi-box-arrow-left">&nbsp;Disconnect</button>
        </div>
      </li>
    </ul>
    <main>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
    </main>
  </body>
</html>

html, body {
  margin: 0; padding: 0;
  height: 100%;
}
body {
  display: flex;
  flex-flow: row nowrap;
  width: 100%:
  background-color: red;
}
main {
  flex: 1 0 0;
  overflow-y: scroll;
}
.sidebar {
  margin: 0 20px 0 0; padding: 0;
  list-style-type: none;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 auto;
  background-color: red;
}
.sidebar-top {
  margin: 0; padding: 5px;
  flex: 0 0 auto;
  background-color: green;
}
.sidebar-middle {
  margin: 0; padding: 5px;
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: yellow;
}
.sidebar-middle nav {
}
.sidebar-middle nav > li {
}
.sidebar-bottom {
  margin: 0; padding: 5px;
  flex: 0 0 auto;
  background-color: blue;
}

垂直滚动不适用于屏幕大小

Vertical scroll not working at the size of the screen

css

bootstrap-4