我有以下 html 正文：
<body>
<div class="container-fluid h-100 border">
<div class="row h-50">
<div class="col-sm-12 bg-danger">Row1</div>
</div>
<div class="row h-50">
<div class="col-sm-12 bg-primary">Row2</div>
</div>
</div>
</body>
我想更改两行的高度，但总是让它们都填充容器。事实上，它们都占据了屏幕的一半。但是，如果我将高度更改为 20 和 80，这些行就会恢复为屏幕顶部的 2 个小行。唯一有效的其他高度是 100 和 100，它们只会形成 2 个全屏行，这也不是我想要的。
有任何想法吗？？
flex-grow-1使用这些类div.container-fluid
如果您希望两者均rows等地填充容器，请flex-grow-1分别使用它们。
body,
html {
height: 100%;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container h-100 d-flex flex-column">
<div class="row flex-grow-1 bg-danger"></div>
<div class="row flex-grow-1 bg-primary"></div>
</div>行填充容器的 50%
否则，使用flex-grow-1其中之一并控制第二个的高度。
body,
html {
height: 100%;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container h-100 d-flex flex-column">
<div class="row h-25 bg-danger"></div>
<div class="row flex-grow-1 bg-primary"></div>
</div>第一行填充容器的 25%，第二行填充剩余的可用空间。
容器的所有父级都需要有100%高度。
| 归档时间： |
|
| 查看次数： |
30539 次 |
| 最近记录： |