I have the following body of html:
<body> <div> <div> <div>Row1</div> </div> <div> <div>Row2</div> </div> </div> </body> I want to change the heights of the 2 rows, but always having them both fill the container. As it is they both take up half of the screen. However if I change the heights to say 20 and 80, the rows just revert to 2 tiny rows at the top of the screen. The only other heights that work are 100 and 100 which just makes 2 full screen rows which is not what I want either.
Any ideas??
2 Answers
Use flex-grow-1
Use these clasees on div.container-fluid
- d-flex - to make it flex
- flex-column - to change its direction to column
- h-100 - to make its height 100%.
Should you want that both of the rows fill the container equally, use flex-grow-1 on each one of them.
body, html { height: 100%; }<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div> <div></div> <div></div> </div>Rows fills 50% of container
Otherwise, use flex-grow-1 on one of them and control hieght of the second one.
body, html { height: 100%; }<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div> <div></div> <div></div> </div>The first row fills 25% of the container and the second one the rest of available space.
All of the parents of the container need to have 100% height.
Firstly, you have to set html and body to 100% height.
Then you can use predefined bootstrap classes, like h-50 or h-75 to fill the container as you desire - that is no such class like h-80, as you can check here.
However, if you want specific heights you can simply create custom classes, like so:
.h-80 { height: 80%; } .h-20 { height: 20%; } 
