我正在做一个新的设计,我有一个页眉,一个侧菜单,和一个页脚内的主要部分。
我试图使主要部分填充剩余的空间作为最小高度,将页脚推到页面的底部。
如果需要的话,我希望主要部分占据剩余的空间,但是当主要部分大于视图高度时,所有内容都应该滚动,所以没有粘性的页眉或页脚。
这是可以在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>
1条答案
按热度按时间7vhp5slm1#
您需要使包含列成为一个灵活容器,然后可以对其中的行应用增长。