css - 移动端局部滚动 - 移动端滚动




引导程序4,使列表组可滚动,与flexbox一起,可滚动或不滚动 (2)

我正在使用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;
}

在pnkr上有一个DEMOhttps//plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

当页面内容为空时,我需要在页脚底部,因此我使用: .bigone { height: 100vh; } .bigone { height: 100vh; }和引导Flexbox对齐实用程序,如: <div class="bigone d-flex flex-column">

现在,我需要cardlist-group和“可以滚动”的col-6 ,所以要有最大的底部到底部的高度。

简而言之: BODY不能有滚动条

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

如何? 我不是一个flexbox专家。

我不需要IE,只是Chrome。

重要提示

我不能让我的卡高度固定这样的事情:

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

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

问题的图片



我不确定你在找什么,但我认为这是一个调整CSS的高度和溢出的问题。

body {
  overflow: hidden;
}

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;

}

.main {
  flex: 1;
}

.scrolly {
    overflow-y:auto !important;
    height: 100%;
}

.col-6 {
    height: calc(100vh - 72px);
    flex:1;
    overflow: hidden;
}

https://plnkr.co/edit/CqSI76UnDoG7mFt3x7Vj?p=preview





bootstrap-4