我正在使用 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-group在 card和 col-6 “这么多的单词”是可滚动的，所以要有一个最大的高度到页脚所在的底部。
简而言之:BODY 不能有滚动条。
我的页眉和页脚高度不是固定的，它们会变化。
怎么做？我不是 flexbox 专家。
我不需要 IE，只需要 Chrome。
重要:
我不能用这样的东西固定我的卡片高度:
height: calc(100vh - header.height - footer.height - etc...);
因为我的页眉、页脚等高度会动态变化。
问题图片:
最佳答案
根据spec ，设置 flex: 1(在 .main 元素上)等同于 flex: 1 1 0，简写为:
flex 增长:1flex-shrink: 1flex 基础: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;
}
引用:
编辑(根据问题的变化)
我上面的回答从 body 中删除了滚动条，并为 .main 部分提供了一个垂直滚动条。
要使 .main 部分中的每一列都可以使用垂直滚动条，请进行以下调整:
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
关于css - Bootstrap 4，使列表组可滚动，连续，带 flexbox ，有或没有 body 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41570673/