文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4，使列表组滚动，在一行，与柔箱，或不带身体卷轴。

问引导4，使列表组滚动，在一行，与柔箱，或不带身体卷轴。
EN

Stack Overflow用户

提问于 2017-01-10 06:02:02

回答 3查看 35.2K关注 0票数 14

我正在使用引导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：https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3上有一个演示

当页面内容为空时，我需要页脚位于底部，因此我使用的是：.bigone { height: 100vh; }和Bootstrap对齐实用程序，如：<div class="bigone d-flex flex-column">

现在我需要list-group在card和col-6与“这么多的单词”是可滚动的，所以有一个高度两个最大到底部的页脚。

简单地说：主体不能有滚动条。

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

怎么做？，我不是柔箱专家。

我不需要IE，只要Chrome。

重要

我不能用这样的东西来固定我的卡高：

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

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

问题的图片

twitter-bootstrap

twitter-bootstrap-3

flexbox

bootstrap-4

css

TDSQL-CMySQL免费体验

云原生数据库TDSQL-C MySQL 2核4G 免费体验15天

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-01-12 07:53:25

根据等级库，设置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;
}

修正柱塞

参考资料：

flex

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

上面的答案删除了body中的滚动条，并为.main部分提供了一个垂直滚动条。

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

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

修正柱塞

票数 11

Stack Overflow用户

发布于 2018-07-04 11:13:45

我有过

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