Bootstrap -如何创建一个全屏布局与滚动栏？

wmvff8tz 于 5个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(103)

我试图创建一个全屏布局，占据100%的视口与粘性页眉和页脚，并在主要内容区域单独滚动列。
我尝试过在不同的行和列上使用.h-100和.flex-grow-1，但我不能完全让它工作。我最接近的方法是将h-100添加到容器和中间行，但这会将页脚推离屏幕底部。

<body>
<div class="container-fluid h-100">
    <div class="row">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">Article list </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row">
        <div class="col-12 border">Footer </div>
    </div>
</div>
</body>

字符串
我可以让它只工作一列，但添加超过1列打破了布局的方式，我不明白。

twitter-bootstrap

来源：https://stackoverflow.com/questions/53896925/bootstrap-how-to-create-a-full-screen-layout-with-scrollable-columns

2条答案

按热度按时间

cunj1qz11#

将容器设置为d-flex，然后使用flex-grow-1使内容区域填充高度。您还需要在导航栏和页脚上使用flex-shrink-0，这样它们就不会在高度上“挤压”。

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

字符串
演示：https://www.codeply.com/go/ouc3hddx5i
相关：
Use remaining vertical space with Bootstrap 4的
Bootstrap 4.0 - responsive header with image + navbar + full-height body的

赞(0）回复(0）举报 5个月前

vlf7wbxs2#

如果你使用的是Bootstrap 5.3，你需要在你的css中添加main {overflow-y: auto}和html, body。

html,
body {
    height: 100%;
    max-height: 100%;
}
main {
    overflow-y: auto;
}

字符串

赞(0）回复(0）举报 5个月前

我来回答

Bootstrap -如何创建一个全屏布局与滚动栏？

2条答案

相关问题

热门标签

最新问答