html - Flex - child 固定位置和 100% 高度

Question

固定高度为 100(拉伸(stretch)超过高度)的菜单。 如果菜单中的 het 内容在 div 之外增长，则必须在菜单中显示滚动条。它的高度可能不会超过 100。

页面内容可以增长到任何高度(最小高度也延伸到父级的高度)。如果内容大小正在增长，则必须显示默认滚动条(在右侧)

HTML:

<div class="module">
      <nav class="vertical-menu">
        <header>
          <h5>Menu</h5>
        </header>
        <div class="menu-links">
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/> 
        </div>
      </nav>
      <div class="page-content">
        Some content<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
      </div>
    </div>

CSS:

    .module {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: lightgray;
    }

    .vertical-menu {
      margin: 10px 0;
      width: 300px;
      background-color: coral;
      flex-shrink: 0;
      align-items: stretch;
    }

    .vertical-menu h5 {
      font-size: 23px;
      padding: 10px 22px;
      border-bottom: 2px solid black;
    }

    .page-content {
      margin: 10px;
      background: tomato;
      flex-grow: 1;
    }

代码笔 https://codepen.io/Babulaas/pen/ZoPvmO

我希望有人能帮我解决这个问题。

Answer 1

给你!

https://codepen.io/anon/pen/VBEpOR#anon-login

因此，您希望边栏在滚动页面时始终保持可见。

您应该将 .vertical-menu 的内容包装到辅助容器 .vertical-menu-body 并且:

• 将其定位为固定；

• 赋予它与.vertical-menu相同的宽度

• 使用overflow-y: scroll启用滚动

• 用 max-height: 100vh 限制它的高度。

完整代码。

CSS:

.module {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: lightgray;
}

.vertical-menu {
  margin: 10px 0;
  width: 300px;
  flex-shrink: 0;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.vertical-menu-body {
  position: fixed;
  max-height: 100vh;
  width: 300px;
  background-color: coral;
  overflow-y: scroll;
}

html:

<div class="module">
  <nav class="vertical-menu">
    <div class="vertical-menu-body">
      <header>
        <h5>Menu</h5>
      </header>
      <div class="menu-links">
        menu link<br/>
        ...
      </div>
    </div>
  </nav>
  <div class="page-content">
    Some content<br/>
    ...
  </div>
</div>