Html Bootstrap 4 行填充剩余高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50262517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 row fill remaining height
提问by Egor
I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding h-100to 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:
我正在努力使一行伸展以填充剩余的可用高度。我尝试添加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>
codepen: https://codepen.io/ee92/pen/zjpjXW/?editors=1100
代码笔：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?
我想让蓝色行（第 2 行）填满所有的红色空间。有什么建议？
Thanks
谢谢
回答by Zim
Use the Bootstrap 4.1 flex-grow-1class...
使用Bootstrap 4.1flex-grow-1类...
https://www.codeply.com/go/Iyjsd8djnz
https://www.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
更新 4.3.1：使用 vh-100 实用程序类的另一个示例
https://www.codeply.com/go/h3bZbM6eSS
https://www.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
相关：如何使行拉伸剩余高度
回答by Alejandro Bazán
This is a solution. The wrapper divhas to have h-100, the divthat adapts to height has to have flex-grow-1 and overflow-auto. This way, the divwill grow to fill the space when its content is minor than the available space and will show the scrollbar when its content is higher than the available space.
这是一个解决方案。包装器div必须有 h-100，div适应高度的必须有 flex-grow-1 和 overflow-auto。这样，div当其内容小于可用空间时，它将增长以填充空间，并在其内容高于可用空间时显示滚动条。
<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">
<div class="text-white p-0" style="height:50px">HEADER</div>
</div>
<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">
<div>Item1</div>
<div>Item2</div>
INNER text 1<br>
INNER text 2<br>
</div>
<div class="flex-column justify-content-center bg-darkblue px-2">
<div class="text-white p-0" style="height:50px">FOOTER</div>
</div>
