我正在使用Bootstrap 4(现在我正在使用alpha-6).
我有这种情况:
My headerNav barCard HeaderCard FooterFIRST LINE
So many words, so many words. So many words, so many words. So many words, so many words.
So many words, so many words. So many words, so many words. So many words, so many words.
So many words, so many words. So many words, so many words. So many words, so many words.
LAST LINE
Footer
这是css:
.bigone { display: flex; min-height: 100vh; flex-direction: column; } .main { flex: 1; }
plnkr上有一个DEMO:https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3
当页面内容为空时,我需要页脚在底部,因此我正在使用: 现在我需要 简而言之:BODY必须没有滚动条. 我的页眉和页脚高度不固定,它们会改变. 如何?我不是flexbox专家. 我不需要IE,只需Chrome. 重要提示: 我无法通过以下方式修复卡片高度: 因为我的页眉,页脚等高度动态变化. 问题图片: 根据规范,
但是,由于某些原因, 但是,如果您给出 修订的朋克 参考:
7.1.1。的基本价值
编辑(基于对问题的更改) 我在上面的答案从中删除了滚动条, 要使垂直滚动条可用于该 修订的朋克.bigone { height: 100vh; }
和Bootstrap Flexbox对齐实用程序,如:list-group
in card
和col-6
with"这么多单词"可以滚动,所以要有一个高度,最大到底部所在的底部.height: calc(100vh - header.height - footer.height - etc...);
1> Michael_B..:flex: 1
(.main
元素上的)设置等效于flex: 1 1 0
,表示以下内容的简称:flex-grow: 1
flex-shrink: 1
flex-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;
}
flex
body
并为该.main
部分提供了垂直滚动条。.main
部分中的每一列,请进行以下调整:.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有