html - Bootstrap 4行填充剩余高度
问题描述
我正在努力使一行伸展以填充剩余的可用高度。我尝试添加h-100
到行类,但这会导致屏幕底部出现空白。必须有办法做到这一点,但我完全被难住了。这是我的代码:
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 bg-red">
<div class="h-100">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:200px">ROW 1</div>
</div>
</div>
<div class="row justify-content-center bg-blue">
<div class="text-white">ROW 2</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>
代码笔: https ://codepen.io/ee92/pen/zjpjXW/ ?editors=1100
我想让蓝色行(第 2 行)填满所有红色空间。有什么建议么?
谢谢
解决方案
使用Bootstrap 4.1flex-grow-1
类...
https://codeply.com/go/Iyjsd8djnz
html,body{height:100%;}
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<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-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:150px">ROW 1 - fixed height</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">ROW 2 - grow remaining height</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>
更新 4.3.1:另一个使用 vh-100 实用程序类的示例
https://codeply.com/go/h3bZbM6eSS
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<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-fluid">
<div class="row justify-content-center min-vh-100">
<div class="col-4 bg-red">
<div class="d-flex flex-column h-100">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:150px">ROW 1 - fixed height</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">ROW 2 - grow remaining height</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>
相关:如何使行拉伸剩余高度