place html after a full screen height responsive div using Bootstrap 4 - html

Question

Basically I have 3 main components: 1 navbar, 1 content div separated in sections and 1 footer.
I've finally made my design responsive with for the first two components but not for the footer.
my content container (parent) have the class h-100 that sets the height to 100% child also have a 100% value only problem is that when I use inspector I see my parent container recognized as having a the size of the screen and because of that the footer is placed after the first section (there's 3 or more sections that should be 3 or more times the height of the screen minus the navbar)
here is a reproduction of the resulting html (I'm normally using Angular)
#media (max-width: 979px) {
.section {
padding-top: 0px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 60px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hello
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hi
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hey
</div>
</div>
</div>
<div class="row">
Footer is not placed correctly
</div>

Answer 1

Your issue is that your are specifying height 100% for the container, but 100% of what? In your case the body tag, but the body gets it's height from the size of your content(which on full screen is about 1000px for the first content box), then you also specify 100% height for each of your content boxes. Again 100% of what? The container, which is 1000px is this example. So the footer jumps up after what it thinks the size of page, but then each of the additional content boxes also get that same height, which leads to your weird situation.
In short if you need to keep the 100% height on the container, try adding overflow: auto to the container. Otherwise you could remove the 100% height rule from the container.

Answer 2

here is my solution.
please tell me if it is not a best practice.
every row is wrapped into div with h-100 as class and it works
I also removed container-fluid
HTML
#media (max-width: 979px) {
.section {
padding-top: 48px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 48px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hello
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hey
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
ola
</div>
</div>
</div>
<div class="row">
Footer is placed correctly.
</div>