Bootstrap 主要部分不占用垂直空间

r1wp621o  于 2023-01-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(160)

我正在做一个新的设计,我有一个页眉,一个侧菜单,和一个页脚内的主要部分。

我试图使主要部分填充剩余的空间作为最小高度,将页脚推到页面的底部。
如果需要的话,我希望主要部分占据剩余的空间,但是当主要部分大于视图高度时,所有内容都应该滚动,所以没有粘性的页眉或页脚。
这是可以在Bootstrap 5中完成的吗?我看到在谈论CSS网格时经常提到这些类型的设计,但我想知道没有它是否可行。
我尝试过使用bootstrap flex实用程序进行不同的设置,但我的Bootstrap/CSS知识仅限于此。

html,
body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.header {
  height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" defer></script>

<div class="h-100 container-fluid d-flex flex-column">
  <div class="row bg-warning">
    <div class="col-12 py-4 header">header</div>
  </div>
  
  <div class="row no-gutter flex-grow">
    <div class="col-1 bg-primary">
      <div class="sidebar-item">Sidebar</div>
    </div>
    
    <div class="col-11 px-0">
      <div class="main bg-success flex-grow">
        Main
      </div>
      
      <div class="bg-danger py-3">
        Main Footer
      </div>
    </div>
  </div>
</div>
7vhp5slm

7vhp5slm1#

您需要使包含列成为一个灵活容器,然后可以对其中的行应用增长。

html,
body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.header {
  height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" defer></script>

<div class="h-100 container-fluid d-flex flex-column">
  <div class="row bg-warning">
    <div class="col-12 py-4 header">header</div>
  </div>

  <div class="row no-gutter flex-grow">
    <div class="col-1 bg-primary">
      <div class="sidebar-item">Sidebar</div>
    </div>

    <div class="col-11 d-flex flex-column px-0">
      <div class="main bg-success flex-grow-1">
        Main
      </div>

      <div class="bg-danger py-3">
        Main Footer
      </div>
    </div>
  </div>
</div>

相关问题