尝试创建具有上半部分和下半部分的全屏布局。上半部分应包含一个元素列表,如果超过屏幕高度的一半,则应具有滚动条。
经过一些搜索,我能够使用以下标记获得可行的解决方案:
<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/
无论列表中的元素数量如何,我应该对标记进行哪些更改以保持一致的行为?
最佳答案
您只需将 min-height:100vh
行更改为 height:100vh
...
<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>
关于css - Bootstrap 4.1 flex 50%-high 滚动列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53161669/