Bootstrap 4，使列表组可滚动，连续，带有弹性框，有或没有正文滚动答案

【问题标题】：Bootstrap 4, make list-group scrollable, in a row, with flexbox, with or without body scrollBootstrap 4，使列表组可滚动，连续，带有弹性框，有或没有正文滚动
【发布时间】：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...);

因为我的页眉、页脚等高度是动态变化的。

问题图片：

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 flexbox bootstrap-4

【解决方案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 of flex

编辑（基于问题的更改）

我上面的回答从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 */
}

【讨论】：