'how to make footer stay at the bottom of page despite there's not enough of content [duplicate]

I tried to let the footer stay at the bottom on the "short page", which means there's not enough content to push the footer down.

this is what I want it to look like: enter image description here

this is how it look right now:

enter image description here

this is the css code:

.footer {
  clear: both;
  position: static;
  bottom:0;
  width: 100%;
  margin-top: 5vh;
  padding-left:5%;
  padding-right: 5%;
  margin-bottom: 5vh;
  color: white;
}

if I use position: fixed, it will stay at the bottom of the screen, but when it's "long page", it will also overlay the body as I scroll, like this:

enter image description here

position: sticky is the same kind of result.

if it's position: absolute, it will just stuck at the certain spot

I googled the entire day but still, really need some help.

htmlcss


Solution 1:[1]

Just for the record, the footer-element goes inside the body-element.

On pages where you don't have enough content to fill up the viewport, you can set the body's height to 100vh which will fill up the entire viewport of the browser. Keep in mind this limits the height to only 100vh, so you can't scroll further down the page. But seeing as there isn't enough content on your page, this shouldn't be an issue. Just make sure you don't apply this styling on other pages where you have enough content to fill up the viewport.

You can then either make wrapper/container-element for your content and apply this styling (you could also apply this directly on the body-element, minus the height: 100%). This will make the container fill up the remaining height of the viewport.

display: flex;
flex-direction: column;
height: 100%;

By then applying margin-top: auto on the footer-element, the remaining space will be converted to the maximum margin-top value possible, thus pushing the entire footer-element to the bottom of the page.

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

section {
  background-color: tomato;
}

footer {
  margin-top: auto;
  background-color: limegreen;
}
<body>
  <div class="wrapper">
    <section>
      section
    </section>
    <footer>
      footer
    </footer>
  </div>
</body>

Solution 2:[2]

#head{
height:10vh;
background-color:red;
}
#content{
height:80vh;
}
#footer{
height:10vh;
background-color:blue;
}
body{
margin:0;
padding:0;
}
<div id = 'head'></div>
<div id = 'content'></div>
<div id = 'footer'></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 DCR

Related Questions