Bootstrap 4,使用flexbox,使用或不使用body scroll,使列表组可以连续滚动
12 css flexbox twitter-bootstrap twitter-bootstrap-3 bootstrap-4
我正在使用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">
现在我需要list-groupin card和col-6with"这么多单词"可以滚动,所以要有一个高度,最大到底部所在的底部.
简而言之:BODY必须没有滚动条.
我的页眉和页脚高度不固定,它们会改变.
如何？我不是flexbox专家.
我不需要IE,只需Chrome.
重要提示:
我无法通过以下方式修复卡片高度:
height: calc(100vh - header.height - footer.height - etc...);
因为我的页眉,页脚等高度动态变化.
问题图片:
根据规范，flex: 1（.main元素上的）设置等效于flex: 1 1 0，表示以下内容的简称：
flex-grow: 1flex-shrink: 1flex-basis: 0
但是，由于某些原因，flex: 1代码无法按预期工作。（根据您的问题，我仅在Chrome中签入）。
但是，如果您给出.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;
}
参考：
编辑（基于对问题的更改）
我在上面的答案从中删除了滚动条，body并为该.main部分提供了垂直滚动条。
要使垂直滚动条可用于该.main部分中的每一列，请进行以下调整：
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}