Bootstrap - 如何创建具有可滚动列的全屏布局？

问题描述 投票：0回答：2

我正在尝试创建一个占据 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>

我可以让它仅使用一列，但添加多于一列会以我不理解的方式破坏布局。

css twitter-bootstrap flexbox bootstrap-4
2个回答
7
投票

制作容器

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

相关：
使用 Bootstrap 4 的剩余垂直空间
Bootstrap 4.0 - 带图像+导航栏+全高正文的响应式标题

0
投票

出于某种原因，我在这个问题上挣扎了很多。我使用 

<main>
标签将网站的“独特”内容与导航栏和页脚分开，该标签需要添加 
main {overflow-y: auto}
到下面的CSS
html, body
。使用上面的示例作为模板，这是正确的 html 和 css。

HTML：

<body>
    <div class="container-fluid h-100 d-flex flex-column">
        <div class="row flex-shrink-0">
            <div class="col-12 border">Navbar</div>
        </div>
        <main class="d-flex flex-fill">
            <div class="row flex-fill" style="min-height: 0">
                <div class="col-2 border mh-100" style="overflow-y: auto">Sidebar</div>
                <div class="col-4 border mh-100" style="overflow-y: auto">
                    <div style="background-color: red; min-height: 1000px">Scrollable article list</div>
                </div>
                <div class="col-6 border mh-100" style="overflow-y: auto">Article content</div>
            </div>
        </main>
        <div class="row flex-shrink-0">
            <div class="col-12 border">Footer</div>
        </div>
    </div>
</body>

红色 div 只是为了演示您可以滚动该列。请随意将其替换为您的内容。

CSS：

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.