Bootstrap first container override second container - html

Question

I created a simple webpage with bootstrap that include two containers :
First container :
A white column taking 7/12 of the first row
A black column taking 5/12 of the second row
Second container (under the first one)
A grey page
The first container takes all the page and if you scroll down to the second container, it also takes all the page height
HTML :
<div class="container-fluid h-100 nopadding">
<div class="row h-100 nopadding">
<div class="col-md-7 left nopadding">
left
</div>
<div class="col-md-5 right nopadding">
right
</div>
</div>
</div>
<div class="container-fluid h-100 padding">
<div class="row h-100">
<div class="col details nopadding">details</div>
</div>
</div>
CSS :
html,
body {
height: 100%;
}
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.left {
background: white;
color: black;
height: 100%;
}
.right {
background: black;
color: white;
height: 100%;
}
.details {
background: grey;
color: white;
height: 100%;
}
Here are screenshots of the page (when the page has place to display the black column, everything works. But when I resize the window, it goes under the grey container [I saw that using z-index]) :
I would like the black column to be right under the white one when I resize and the grey column to be under the black column when I resize.
Thanks!

Answer 1

First, you are overrating the power of h-100, then you mixed h-100 with css incorrectly, basically you set on container and row height with h-100 and then in css you defined .left and .right with height of 100% so... Since your containers cannot be higher then 100% and contents (.left and .right) are 100% your “.right” is hidden out of bounds of your row because .left already took all available space...
For a starter I’ve would recommend to use weather bootstrap classes or css, it’s pretty easy to have all that without defining your own css in bootstrap...