Footer covers main content - html

Question

I have tried many solutions in stackoverflow for my problem but somehow none work. Currently my footer covers the main content. This only happens when I shrink the page to the point where I'm in mobile view. I have to say that the footer should always be at the bottom. So if my main content is too short, the footer should still be at the bottom of the page. Currently I am using bootstrap 4.3.1.
My Site.css looks like this:
#footer {
position: absolute;
bottom: 0px;
}
Of course there are other lines in the Site.css. But they are not important for this.
And my layout looks like this:
<div class="jumbotron-fluid body-content">
<div id="main">
#RenderBody()
</div>
<footer id="footer" class="page-footer font-small blue pt-4 footerInfo">
<div class="row footerRow">
<div class="col-lg-3 footerCol">
<div class="footer-item text-center">
<div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
<div class="fa fa-phone phoneIcon"></div>
</div>
<div><h3>Telefon</h3></div>
<div>12345</div>
</div>
</div>
</div>
</footer>
</div>
I don't want the footer covering my main content. The footer should grow downwards in the mobile view. Currently it is growing upwards and covers my complete content.
Can anyone help?
Thank you.

Answer 1

To use pure CSS, min-height: 100vh; display: flex; flex-direction:column on wrapper and flex-grow: 1 on main content are the way to go.
Or, simplified by Bootstrap classes:
<div class="d-flex flex-column" style="min-height: 100vh">
<main class="flex-fill"></main>
<footer></footer>
</div>
Short example:
/* not part of the solution, visual helper */
footer {
background-color: #369;
color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column" style="min-height: 100vh">
<main class="flex-fill">
<div class="container-fluid">
<div class="row">
<div class="col">
#RenderBody()
</div>
</div>
</div>
</main>
<footer id="footer" class="page-footer font-small blue footerInfo">
<div class="container-fluid">
<div class="row footerRow">
<div class="col-lg-3 footerCol py-2">
<div class="footer-item text-center">
<div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
<div class="fa fa-phone phoneIcon"></div>
</div>
<div>
<h3>Telefon</h3>
</div>
<div>12345</div>
</div>
</div>
</div>
</div>
</footer>
</div>
Tall example:
/* not part of the solution, visual helper */
main {
min-height: 200vh;
border: 1px solid red;
}
footer {
background-color: #369;
color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column" style="min-height: 100vh;">
<main class="flex-fill">
<div class="container-fluid">
<div class="row">
<div class="col">
#RenderBody()
</div>
</div>
</div>
</main>
<footer id="footer" class="page-footer font-small blue footerInfo">
<div class="container-fluid">
<div class="row footerRow">
<div class="col-lg-3 footerCol py-2">
<div class="footer-item text-center">
<div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
<div class="fa fa-phone phoneIcon"></div>
</div>
<div>
<h3>Telefon</h3>
</div>
<div>12345</div>
</div>
</div>
</div>
</div>
</footer>
</div>
Also please pay attention to the layout system. It works like a clock, but it's kind of delicate:
.col-*-* as direct descendants of .rows. If you need another division, place a .row inside a .col (i.e: .row > .col > .row > .col, never .col > .col or .row > .row)
never nest .containers! (you can have a .container inside a .container-fluid, though)

Answer 2

Did you use any media query to set behaviour at specific screen size?
below is a sample code
#media only screen and (max-device-width: 480px) {}
in your css

Answer 3

I suggest that you set your footer’s property to fixed position and overflow hidden