Bootstrap 4 行填充剩余高度
[英] Bootstrap 4 row fill remaining height
本文介绍了Bootstrap 4 行填充剩余高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在努力使一行伸展以填充剩余的可用高度.我尝试将 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 class="row justify-content-center bg-blue"><div class="text-white">ROW 2</div>
<div class="col-8 bg-gray"></div>
codepen:
我想让蓝色行(第 2 行)填满所有的红色空间.有什么建议吗?
谢谢
解决方案
使用 Bootstrap 4.1 flex-grow-1 类...
https://codeply.com/go/Iyjsd8djnz
html,body{height:100%;}.bg-紫色{背景:RGB(48,0,50)；}.bg-灰色{背景:RGB(74,74,74)；}.bg-蓝色{背景:RGB(50,101,196)；}.bg-红色{背景: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 - 固定高度</div>
<div class="row justify-content-center bg-blue flex-grow-1"><div class="text-white">ROW 2 - 增加剩余高度</div>
<div class="col-8 bg-gray"></div>
更新 4.3.1:另一个使用 vh-100 实用程序类的示例
https://codeply.com/go/h3bZbM6eSS
.bg-purple {背景:RGB(48,0,50)；}.bg-灰色{背景:RGB(74,74,74)；}.bg-蓝色{背景:RGB(50,101,196)；}.bg-红色{背景: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 - 固定高度</div>
<div class="row justify-content-center bg-blue flex-grow-1"><div class="text-white">ROW 2 - 增加剩余高度</div>
<div class="col-8 bg-gray"></div>
相关:如何让行拉伸剩余高度
I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding h-100 to the row class but that causes a white space at the bottom of the screen. There must be a way to do it but I'm totally stumped.. Here is my code:
<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>
codepen: https://codepen.io/ee92/pen/zjpjXW/?editors=1100
I'd like to make the the blue row (ROW 2) fill all the red space. Any suggestions?
Thanks
解决方案
Use the Bootstrap 4.1 flex-grow-1 class...
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>
Update 4.3.1: Another example using the vh-100 utility class
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>
Related: How to make the row stretch remaining height
这篇关于Bootstrap 4 行填充剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
