使用 flex-grow 1 显示子元素的滚动

Question

我正在尝试获得一个简单的 layout 由一堆 header、main section, 页脚.

我正在使用 bootstrap 5.

整个布局必须覆盖所有可用的宽度和高度space，必须隐藏溢出（x和y）。

Header 和 wrapper 必须占用所有需要的 space.

主要部分必须在页眉和页脚之间，并且必须占用所有可用的space。 主要部分由一个侧边栏和一个将包含[=36=]主要内容的区域组成。

侧边栏和主要内容并排放置。 侧边栏 必须占整个可用宽度的 1/6。 主要内容 必须占用剩余的 space 宽度。

这是一些代码：

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title></title>
  </head>
  <body>
    <div class="d-flex flex-column wrapper">
      <div>
        <nav class="navbar navbar-light header">
          <div class="px-3">
            <a class="navbar-brand" href="#">
              Header
            </a>
          </div>
        </nav>
      </div>
      <section class="flex-grow-1 d-flex section">
        <div class="col-2 sidebar">
          <ul class="nav flex-column menu-nav">
            <li class="nav-item px-3 py-2">
              Sidebar
            </li>
          </ul>
        </div>
        <div class="col p-2 px-3 content">
          Main content
        </div>
      </section>
      <nav class="navbar navbar-light header">
        <div class="px-3">
          Footer
        </div>
      </nav>
    </div>
  </body>
  <style>
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .header {
      background-color: #1ea185;
    }

    .wrapper {
      height: 100vh;
    }

    .section {
    }

    .sidebar {
      height: 100%;
      overflow-y: auto;
      background-color: #fff;
    }

    .content {
      height: 100%;
      overflow-y: auto;
      background-color: #eff6f6;
    }
  </style>
</html>

我想在需要时为 sidebar/main content 显示 overflow-y。但我也想保留 footer.

的位置

Answer 1

<div class="col p-2 px-3 content relative">
      <div class="absolute inset-0 overflow-y-scroll"> 
          Main content
      </div>
    </div>

将.content 容器设置为相对的，然后将内容放在absolute inset-0 的内部div。

编辑：这只是一个示例，我在 class 上使用顺风语法，bootstrap 可能略有不同 classNames

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title></title>
  </head>
  <body>
    <div class="d-flex flex-column wrapper">
      <div>
        <nav class="navbar navbar-light header">
          <div class="px-3">
            <a class="navbar-brand" href="#">
              Header
            </a>
          </div>
        </nav>
      </div>
      <section class="flex-grow-1 d-flex section">
        <div class="col-2 sidebar">
          <ul class="nav flex-column menu-nav">
            <li class="nav-item px-3 py-2">
              Sidebar
            </li>
          </ul>
        </div>
        <div class="col p-2 px-3 content relative">
          <div class="absolute inset-0 overflow-y-scroll"> 
              Main content
          </div>
        </div>
      </section>
      <nav class="navbar navbar-light header">
        <div class="px-3">
          Footer
        </div>
      </nav>
    </div>
  </body>
  <style>
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .header {
      background-color: #1ea185;
    }

    .wrapper {
      height: 100vh;
    }

    .section {
    }

    .sidebar {
      height: 100%;
      overflow-y: auto;
      background-color: #fff;
    }

    .content {
      height: 100%;
      overflow-y: auto;
      background-color: #eff6f6;
    }
  </style>
</html>

使用 flex-grow 1 显示子元素的滚动

Show scroll for child of element with flex-grow 1

css

bootstrap-5