CSS Bootstrap 4，使列表组可滚动，连续，带flexbox，带或不带主体滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41570673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4, make list-group scrollable, in a row, with flexbox, with or without body scroll
提问by
I'm using Bootstrap 4(now I'm on alpha-6).
我正在使用Bootstrap 4（现在我在 alpha-6 上）。
I have this situation:
我有这种情况：
<body>
<!-- HERE I HAVE one div automatically generated with randomly ID and class -->
<div class="bigone">
<div class="container-fluid">
<div class="header">
My header
</div>
</div>
<div class="mybar">
Nav bar
</div>
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
</div>
<div class="card-footer">
Card Footer
</div>
</div>
</div>
<div class="col-6">
<h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
<br> So many words, so many words. So many words, so many words. So many words, so many words.
<br> So many words, so many words. So many words, so many words. So many words, so many words.
<br>
<h1>LAST LINE</h1>
</div>
</div>
</div>
</div>
<div class="footer">
Footer
</div>
</div>
<!-- HERE THAT DIV CLOSED -->
</body>
This is the css:
这是css：
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
There is a DEMO on plnkr: https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3
plnkr 上有一个演示：https: //plnkr.co/edit/Q9PQIj8uDFY80bxJGks3
I need footer to be on bottom when the page content is empty, for this reason I'm using: .bigone { height: 100vh; }and Bootstrap Flexbox align utilities like: <div class="bigone d-flex flex-column">
当页面内容为空时，我需要页脚在底部，因此我使用：.bigone { height: 100vh; }和 Bootstrap Flexbox 对齐实用程序，例如：<div class="bigone d-flex flex-column">
Now I need the list-groupin cardand the col-6with "so many words" to be scrollable, so to have an height for both max to the bottom where the footer is.
现在我需要list-groupincard和col-6with "so many words" 是可滚动的，所以有一个 max 到页脚底部的高度。
In a nutshell: BODY must not have the scroll bar.
简而言之：BODY 不能有滚动条。
My header and footer height are not fixed, they change.
我的页眉和页脚高度不是固定的，它们会改变。
How to?I'm not a flexbox expert.
如何？我不是 flexbox 专家。
I don't need IE, just Chrome.
我不需要 IE，只需要 Chrome。
IMPORTANT:
重要：
I can't make my card height fixed with something like this:
我不能用这样的东西固定我的卡片高度：
height: calc(100vh - header.height - footer.height - etc...);
because my header, footer, etc. heights change dynamically.
因为我的页眉、页脚等高度动态变化。
Picture of the problem:
问题图片：
采纳答案by Michael Benjamin
According to the spec, the setting flex: 1(on the .mainelement) is equivalent to flex: 1 1 0, shorthand for:
根据规范，设置flex: 1（在.main元素上）相当于flex: 1 1 0，简写为：
flex-grow: 1flex-shrink: 1flex-basis: 0
flex-grow: 1flex-shrink: 1flex-basis: 0
However, for some reason, flex: 1is not working as expected in your code. (I'm only checking in Chrome, per your question).
但是，由于某种原因，flex: 1在您的代码中没有按预期工作。（根据您的问题，我只检查 Chrome）。
However, if you give .mainthe full shorthand – and make it a flex container and add overflow– your layout appears to work.
然而，如果你给出.main完整的简写——并使它成为一个弹性容器并添加overflow——你的布局似乎可以工作。
.main {
flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
display: flex;
flex-direction: column;
overflow-y: scroll;
}
Reference:
参考：
EDIT(based on changes to the question)
编辑（基于对问题的更改）
My answer above removes scrollbars from the bodyand provides a vertical scrollbar for the .mainsection.
我上面的回答从 中删除了滚动条，body并为该.main部分提供了一个垂直滚动条。
To make vertical scroll bars available for each column in the .mainsection, make this adjustment:
要为该.main部分中的每一列提供垂直滚动条，请进行以下调整：
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
回答by luky
I have
我有
<div class="fixed-top collapse show wrapper">
<ul class="list-group bg-white menu">
</ul>
</div>
I fixed it by
我修好了
.wrapper {
margin-top: 48px; /* place it under navbar */
height: 100vh;
overflow: scroll;
padding-bottom: 48px; /* compensate margin top */
}
回答by Cooleronie
Created a new Plunker to showcase what you're looking for.
To keep the footer on the bottom use Bootstrap Flexbox Auto Margins.
要将页脚保持在底部，请使用Bootstrap Flexbox Auto Margins。
If you want to keep your main content within the initial viewport height, use the flex-grow:1property with overflow-y:scroll. Its height will adopt responsively based on the space the other elements use.
如果要将主要内容保持在初始视口高度内，请使用flex-grow:1带有overflow-y:scroll. 它的高度将根据其他元素使用的空间响应地采用。
Hope this helped.
希望这有帮助。
