当前位置:  开发笔记 > 前端 > 正文

Bootstrap 4,使用flexbox,使用或不使用body scroll,使列表组可以连续滚动

如何解决《Bootstrap4,使用flexbox,使用或不使用bodyscroll,使列表组可以连续滚动》经验,为你挑选了1个好方法。

我正在使用Bootstrap 4(现在我正在使用alpha-6).

我有这种情况:



  

  
My header
Nav bar

FIRST 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

这是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对齐实用程序,如:

现在我需要list-groupin cardcol-6with"这么多单词"可以滚动,所以要有一个高度,最大到底部所在的底部.

简而言之:BODY必须没有滚动条.

我的页眉和页脚高度不固定,它们会改变.

如何?我不是flexbox专家.

我不需要IE,只需Chrome.

重要提示:

我无法通过以下方式修复卡片高度:

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;
}

修订的朋克

参考:

7.1.1。的基本价值flex


编辑(基于对问题的更改)

我在上面的答案从中删除了滚动条,body并为该.main部分提供了垂直滚动条。

要使垂直滚动条可用于该.main部分中的每一列,请进行以下调整:

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}

修订的朋克

推荐阅读
jerry613
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有