Bootstrap 4.1 flex 50%-high 滚动列表

Question

尝试创建具有上半部分和下半部分的全屏布局。上半部分应该包含一个项目列表，如果它超过屏幕高度的一半，则应该有一个滚动条。

经过一番搜索，我能够使用以下标记获得可行的解决方案：

<div id="app">
  <main role="main" class="container-fluid d-flex">
    <div class="row flex-fill bg-primary" style="min-height:100vh;">
      <div class="col-sm h-100">
        <div class="row h-50 bg-warning" style="overflow:scroll;">
          <div class="col-sm">
            <div>
              <ul class="">
                <li class="">Series 100</li>
                <li class="">Series 200</li>
                <li class="">Series 300</li>
                <li class="">Series 400</li>
                <li class="">Series 500</li>
                <li class="">Series 600</li>
                <li class="">Series 700</li>
                <li class="">Series 800</li>
                <li class="">Series 900</li>
                <li class="">Series 1000</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row h-50 bg-success">
          <div class="col-sm">
            <div>
              test
            </div>
          </div>
        </div>
      </div>
    </div> 
  </main>
</div>

http://jsfiddle.net/0zbcr7mg/4/（确保输出窗口缩小到整个列表不适合的程度）

但是，一旦我向列表中添加了更多项目，布局就会崩溃 - 列表仍然有一个滚动条，但它占据了输出窗口高度的 50% 以上：

http://jsfiddle.net/0zbcr7mg/3/

无论列表中有多少元素，我应该对标记进行哪些更改以保持一致？

Answer 1

您只需要将行 min-height:100vh 更改为 height:100vh...

http://jsfiddle.net/tokep2gn/

<div id="app">
    <main role="main" class="container-fluid d-flex">
        <div class="row flex-fill bg-primary" style="height: 100vh;">
            <div class="col-sm h-100">
                <div class="row h-50 bg-warning" style="overflow:scroll;">
                    <div class="col-sm">
                        <div>
                            <ul class="">
                                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row h-50 bg-success">
                    <div class="col-sm">
                        <div>
                            test
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </main>
</div>

Answer 2

您应该能够通过像这样使用视口高度为 50% 的 2x 部分来稍微简化代码

HTML

<section id="top">
  <ul>
    <li class="">Series 100</li>
    <li class="">Series 200</li>
    <li class="">Series 300</li>
    <li class="">Series 400</li>
    <li class="">Series 500</li>
    <li class="">Series 600</li>
    <li class="">Series 700</li>
    <li class="">Series 800</li>
    <li class="">Series 900</li>
    <li class="">Series 1000</li>
  </ul>
</section>
<section id="bottom">
  <ul>
    <li class="">Series 100</li>
    <li class="">Series 200</li>
    <li class="">Series 300</li>
    <li class="">Series 400</li>
    <li class="">Series 500</li>
    <li class="">Series 600</li>
    <li class="">Series 700</li>
    <li class="">Series 800</li>
    <li class="">Series 900</li>
    <li class="">Series 1000</li>
  </ul>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

#top {
  height: 50vh;
  background-color: dodgerblue;
  overflow: auto; /* Allows for scroll without scrollbars created by overflow: scroll;  */
}

#bottom {
  height: 50vh;
  background-color: tomato;
  overflow: auto;
}

希望对你有所帮助?

Answer 3

您可以检查下一个方法以了解您正在寻找的内容：

1) root div 应该始终分配一个 100vh 值。

2) 主要布局是一个row，使用两个col-12 的设置，每个50% 正好是height。

我还填写了 Javascript 中的 ul 列表，以保持标记更清晰。

$(document).ready(function()
{

    for (var i = 100; i <= 2000; i += 100)
    {
        $(".custom-list").append("<li>Series " + i + "</li>");
    }
    
});

#app {
    height: 100vh;
}

#bottom-section, #top-section {
    overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div id="app">
<main role="main" class="container-fluid h-100">
<div class="row bg-primary h-100">

  <div id="top-section" class="col-12 h-50 bg-warning">
    <ul class="custom-list"></ul>
  </div>

  <div id="bottom-section" class="col-12 h-50 bg-success">
    <div>test</div>
  </div>
</div>
</main>
</div>