Question

我正在使用侧边栏进行主页布局。侧边栏需要固定放置并占据其余高度。

我在div中有两个div.flex-grow-1。一个将保留主要内容，另一个将包含侧边栏。具有主要内容的div会占用剩余空间，而带有position-fixed类的侧边栏则不会。如果我应用h-100，它将溢出，并且部分内容无法看到或滚动。我希望它只剩下剩余的高度并固定。

这是代码

  <body class="bg-warning" style="height: 100vh;">
    <div class="container-fluid px-0 h-100">
      <div class="row no-gutters mx-0 h-100">
        <div class="col h-100">
          <div class="d-flex flex-column h-100">

            <div class="row no-gutters">
              <div class="col">
                <nav class="navbar navbar-expand-sm bg-light navbar-light">
                  <ul class="navbar-nav">
                    ...
                  </ul>
                </nav>
              </div>
            </div>

            <div class="row no-gutters flex-grow-1">
              <div class="col">
                <div class="sidebar w-25 position-fixed bg-dark">sidebar</div>
                <div class="mainContent w-100 bg-info">
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                  Consectetur modi, corporis totam dolore cum illum deserunt
                  enim error incidunt eligendi iste. Rerum et nobis a quae
                  mollitia voluptas consequatur fugiat.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

Bootstrap 4固定div占据剩余高度

0 个答案: