html - Bootstrap4 布局问题 - 用内容填充浏览器页面高度
问题描述
#2 面板包含更少或更多的行,因此无法静态计算其垂直大小。#3 和#4 应该将剩余的高度填充到浏览器窗口的底部。#3 应该可以垂直滚动,因为它可能包含大量“行”。
如何使用 Bootstrap 4 预定义的 CSS 样式构建此布局?可能吗?
这是一种……尝试:
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-red vh-100">
#1 Some content on the left side<br>
should be full height
</div>
<div class="col-8 bg-cyan">
<h1>#2 Some content L1</h1>
<h1>Some content L2</h1>
<h1>Some content L3</h1>
<h1>Some content L4</h1>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 bg-blue overflow-auto">
#3 should fill remaining vertical space<br>
overflow-Y scroll is needed<br>
extra ROW 1<br>
extra ROW 2<br>
extra ROW 3<br>
extra ROW 4<br>
</div>
<div class="col-8">
<div class="bg-green">#4 content</div>
<div class="bg-darkgreen">#5 footer line 1 at the bottom of page</div>
</div>
</div>
</div>
</div>
</div>
</div>
非常欢迎任何建议!
解决方案
您可以使用 flex-grow 和 max-height ( mh-100
)。制作滚动 div (#3) position-absolute
...
<div class="container-fluid">
<div class="row min-vh-100 mh-100">
<div class="col-4 bg-red bg-danger"> #1 Some content on the left side<br> should be full height </div>
<div class="col-8 bg-info d-flex flex-column mh-100">
<h1>#2 Some content L1</h1>
<h1>Some content L2</h1>
<h1>Some content L3</h1>
<h1>Some content L4</h1>
<div class="row flex-grow-1 flex-shrink-1 overflow-hidden">
<div class="col-4 bg-primary overflow-auto">
<div class="position-absolute">
#3 should fill remaining vertical space<br> overflow-Y scroll is needed<br>
extra ROW 1<br> extra ROW 2<br> extra ROW 3<br> extra ROW 4<br> extra ROW 4<br> extra ROW 4<br>
extra ROW 4<br> extra ROW 4<br> extra ROW 4<br> extra ROW 4<br>
</div>
</div>
<div class="col-8 d-flex flex-column px-0">
<div class="bg-success flex-grow-1">#4 content</div>
<div class="bg-dark">#5 footer line 1 at the bottom of page</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- elasticsearch - Elasticsearch:如何将正则表达式查询与过滤器结合起来
- postfix-mta - 带有 gmail 的 Postfix smtp 中继主机替换发件人地址
- c++ - 联合中指针和数组的不同地址
- node.js - 将照片 url 存储在数据库中
- python - Jupyter notebook 无法在 Anaconda 环境中启动
- idris - 如何解决 Idris 中“找不到导入效果”的问题?
- powershell - 我可以使用管道连续两次在字符串上使用拆分吗?
- react-native - 使用 react native 0.59.5 删除警告 viewPagerAndroid
- php - 需要 PHP/CSS 更改
- laravel - 使用条件仅在 laravel 控制器中为管理员用户获取数据