Why is my footer not staying at the bottom of the page?

Question

I am working on my first ever website and it seems that I've run into a problem. I've created a footer, however it does not stay at the bottom.The footer messes up everything else in the page and distorts my items. What should I add in order make my footer stick to the bottom with causing any trouble to the rest of my page?. Here is my code.

* {
margin: auto;
padding: auto;
box-sizing: border-box;
font-family: Century Gothic;
}

header {
height: 15%;
background-size: cover;
background-position: center;
background-color: #ebebeb;
border-bottom: 5px solid #A9A9A9;
position: relative;
}

html,
body {
font-size: .80em;
margin: 0%;
padding: 0%;
color: #696969;
height: 100%;
width: 100%;
}

.footer {
background: #bfbfbf;
color: #d3d3d3;
height: 300px;
position: relative;
}

s .footer .footer-content {
border: 1px solid red;
height: 400px;
}

.footer .footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}

.footer-section-socials h1 {
margin-left: 6%;
margin-top: -1%;
font-weight: 50;
font-size: 150%;
color: black;
}

.logo-footer h1 {
padding: 1.5%;
margin-left: 3%;
font-family: Leckerli One;
color: black;
font-size: 3.1875rem;
}

.footer-about {
margin-left: 2%;
margin-right: 0%;
}

<footer class="footer">
    <div class="footer-content">
        <div class="footer-section-socials">

        </div>

        <div class="footer-section links">

        </div>

        <div class="footer-bottom">
            &copy; #.com | Designed by #
        </div>
    </div>
</footer>

Help in advance!

Do you want the footer to always be visible? Or do you want scroll but just have the footer below everything else? — itsanewabstract, Jun 24 '20 at 17:51

score 0 · Answer 1 · answered Jun 24 '20 at 17:55

Your footer is not sticking to the bottom of the page, because the height of the gray div doesn't span the entire height of the webpage. What you can do to fix this problem is :


 <div class='container'>
    
     <div class='footer'>
  </div>

.container{
  height:100vh;
  border:3px solid red;
  position:relative;
}
.footer{
  position:absolute;
  bottom:0%;
  width:100%;
  height:30px;
  background:gainsboro;
}

score 0 · Answer 2 · answered Jun 24 '20 at 18:06

0

You have to use fixed position to make it stick to the bottom

.footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;

}

answered Jun 24 '20 at 18:06

sriram hegde

2,301
5
29
43

Sachi Cortes · Answer 3 · 2020-06-24T18:14:11.153

There are several ways to do this, I added a default html structure to the snippet:

Position absolute footer and relative, 100vh min-height body:

body, html {
  margin: 0;
  padding: 0;
}

* {
 box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px;
}

body .footer {
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 100%;
 height: 50px;
 background-color: black;
}

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">

</head>


<body>

  <section class="main"></section>

  <footer class="footer"></footer>
  
</body>

</html>

Using flex, min height 100vh body and a section above the footer with flex 2:

body, html {
  margin: 0;
  padding: 0;
}

* {
 box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body .main {
  flex: 2 0 auto;
}

body .footer {
 flex: 0 0 50px;
 display: block;
 width: 100%;
 background-color: black;
}

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">

</head>


<body>

  <section class="main"></section>

  <footer class="footer"></footer>
  
</body>

</html>

Using a 100vh min-height body, a section with calc height and a fixed height footer:

body, html {
  margin: 0;
  padding: 0;
}

* {
 box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: block;
}

body .main {
  min-height: calc(100vh - 50px);
}

body .footer {
 height: 50px;
 display: block;
 width: 100%;
 background-color: black;
}

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">

</head>


<body>

  <section class="main"></section>

  <footer class="footer"></footer>
  
</body>

</html>

Fixed position footer (always visible in viewport):

body, html {
  margin: 0;
  padding: 0;
}

* {
 box-sizing: border-box;
}

body .footer {
 position: fixed;
 bottom: 0px;
 left: 0px;
 width: 100%;
 height: 50px;
 background-color: black;
}

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">

</head>


<body>

  <section class="main"></section>

  <footer class="footer"></footer>
  
</body>

</html>

score 0 · Answer 4 · answered Jun 24 '20 at 18:15

You should normally have a navigation bar, a page body and a footer. The page body should take up all the space between the navigation and the footer.

Least hackish way is using Flex. Try the following:

body {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.navigation {
  height: 60px;
  width: 100%;
  background: blue;
}

.content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-grow: 1;
}

.footer {
  height: 100px;
  width: 100%;
  background: red;
}

<body>
  <div class="navigation"></div>
  <div class="content">Test content</div>
  <div class="footer"></div>
</body>

Why is my footer not staying at the bottom of the page?

4 Answers4