Bootstrap 4、让list-group可以滚动，在一行中，有flexbox，有或没有body scroll

Question

我正在使用 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 和 "so many words" 中的 col-6 可以滚动，这样两者的高度都最大到底部页脚是。

简而言之：BODY不能有滚动条。

我的页眉和页脚高度不是固定的，它们会改变。

怎么做？我不是 flexbox 专家。

我不需要IE，只需要Chrome。

重要:

我不能用这样的东西固定我的卡片高度:

height: calc(100vh - header.height - footer.height - etc...);

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

问题图片:

Answer 1

Created a new Plunker to showcase what you're looking for.

要将页脚保持在底部，请使用 Bootstrap Flexbox Auto Margins。

如果您想将主要内容保持在初始视口高度内，请使用 flex-grow:1 属性和 overflow-y:scroll。它的高度将根据其他元素使用的 space 响应地采用。

希望对您有所帮助。

Answer 2

根据 spec，设置 flex: 1（在 .main 元素上）等同于 flex: 1 1 0，shorthand for:

flex-grow: 1
flex-shrink: 1
flex-basis: 0

但是，由于某些原因，flex: 1 在您的代码中没有按预期工作。（根据你的问题，我只是检查 Chrome）。

但是，如果您给 .main 完整的 shorthand – 并使其成为弹性容器并添加 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

Answer 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 */
}

Bootstrap 4、让list-group可以滚动，在一行中，有flexbox，有或没有body scroll

Bootstrap 4, make list-group scrollable, in a row, with flexbox, with or without body scroll

css

flexbox

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4