I found quite a lot of people asking similar question, but mine seems to be a different problem. This is the arrangement of my div.
<div class="container-fluid px-0">
<header>
</header>
<div class="content">
<div class="content-1">
</div>
<div class="content-2">
</div>
<div class="content-3">
</div>
</div>
</div>
Every class except for header and footer has height:100%; including <html> & <body>
Class content-1, content-2, content-3 has background-size:cover;
because I want the background to be full page.
I don't have any issue, as long as all my content is inside the class "content". However, now I want to add <footer> underneath the class "content". So the <footer> position is supposed to be below content-3, but it appear below content-1 instead. Is there a way to add a <footer> but not inside the class "content"?
What I have tried:
position:absolute; bottom:0; doesn't work. Problem persists.overflow:auto to class "content" will set footer to the
correct position, but now I have two scroll bars.
.content {
display: inline;
}