Bootstrap 4，使列表组可滚动，连续，带有弹性框，有或没有正文滚动
Posted
技术标签:
【中文标题】Bootstrap 4，使列表组可滚动，连续，带有弹性框，有或没有正文滚动【英文标题】：Bootstrap 4, make list-group scrollable, in a row, with flexbox, with or without body scroll 【发布时间】：2017-05-25 01:14:00 【问题描述】：我正在使用 Bootstrap 4（现在我使用的是 alpha-6）。
我有这种情况：
<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>
这是css：
.bigone
display: flex;
min-height: 100vh;
flex-direction: column;
.main
flex: 1;
plnkr上有一个DEMO：https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3
当页面内容为空时，我需要页脚位于底部，因此我使用：.bigone height: 100vh; 和 Bootstrap Flexbox 对齐实用程序，例如：<div class="bigone d-flex flex-column">
现在我需要card 中的list-group 和带有“这么多单词”的col-6 可以滚动，以便两者的最大高度到页脚所在的底部。
简而言之：BODY 不能有滚动条。
我的页眉和页脚高度不是固定的，它们会改变。
如何做？我不是 flexbox 专家。
我不需要 IE，只需要 Chrome。
重要提示：
我不能用这样的东西来固定我的卡片高度：
height: calc(100vh - header.height - footer.height - etc...);
因为我的页眉、页脚等高度是动态变化的。
问题图片：
【问题讨论】：
【参考方案1】：Created a new Plunker to showcase what you're looking for.
要将页脚保持在底部，请使用Bootstrap Flexbox Auto Margins。
如果您想将主要内容保持在初始视口高度内，请将flex-grow:1 属性与overflow-y:scroll 结合使用。它的高度将根据其他元素使用的空间做出响应。
希望这会有所帮助。
【讨论】：
我需要list-group 的 card 组件中的所有这些。不幸的是，不是简单的页眉、主页和页脚。【参考方案2】：
根据spec，设置flex: 1（在.main元素上）等价于flex: 1 1 0，简写为：
flex-grow: 1
flex-shrink: 1
flex-basis: 0
但是，由于某种原因，flex: 1 在您的代码中没有按预期工作。 （根据您的问题，我只检查 Chrome）。
但是，如果您给 .main 提供完整的简写形式——并使其成为 flex 容器并添加 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;
revised plunkr
参考：
7.1.1. Basic Values offlex
编辑（基于问题的更改）
我上面的回答从body 中删除了滚动条，并为.main 部分提供了一个垂直滚动条。
要使.main 部分中的每一列都可以使用垂直滚动条，请进行以下调整：
.main
flex: 1 1 0;
display: flex;
.container-fluid
display: flex;
.col-6
overflow-y: auto;
revised plunkr
【讨论】：
也许我的问题不够清楚。我需要col-6 中的card 可以滚动，而不使用height: calc(100vh - [header and footer height])。怎么做？你回答是什么？它不会将两个 col-6 的可滚动功能更改为我自己的 plnkr。
我的演示和你的不一样。滚动条按您的要求工作。而且没有height 或calc。
好的，亲爱的@Michael_B，我误解了你的回答，但这仍然不是我需要的。我需要在底部显示Footer，但只有当col-6 两个列都有滚动条并且它们的高度为（页面的100% 减去页眉、导航栏和页脚的高度）时。所有这一切都是动态的，因为我的页眉和页脚高度发生了变化，所以我不能使用calc()。这是我的问题。我更新了plnkr。我会用截图更新我的问题。
在您的问题中您说：即使页面内容为空，我也需要页脚位于底部。
当你让一个元素成为一个弹性容器（display: flex 或inline-flex）时，它会自动给子元素全高（align-items: stretch）。这就是原因：你得到动态的全高；不需要calc 或height。【参考方案3】：
我有
<div class="fixed-top collapse show wrapper">
<ul class="list-group bg-white menu">
</ul>
</div>
我修好了
.wrapper
margin-top: 48px; /* place it under navbar */
height: 100vh;
overflow: scroll;
padding-bottom: 48px; /* compensate margin top */
【讨论】：
以上是关于Bootstrap 4，使列表组可滚动，连续，带有弹性框，有或没有正文滚动的主要内容，如果未能解决你的问题，请参考以下文章
如何使 Twitter Bootstrap 的 <pre> 块水平滚动？