Force footer to the bottom when content not filling the page

Question

I am having an issue keeping the footer to the bottom of the page if there is not enough content to fill the page. If i switch the position to fixed it keeps the footer at the bottom however if stays at the bottom of the page visually at all times despite scrolling. I just want the footer to come after all of the content but when content doesnt fill page, fix it to the bottom. Any suggestions? Not sure if my explanation was clear enough.

.footer-container {
  width: 100%;
  height: 20vh;
  background-color: #1b1b1b;
  margin: auto 0;
  position: relative;
}

.parent-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

Can you provide the class for the content or siblings of footer-container? — Usaid, Mar 03 '23 at 03:56
I have header, content and footer in a flex container, if that helps any — , Mar 03 '23 at 04:48
Sorry I deleted the comment before reading your reply. I was typing something else. You mean the one with setting 80vh worked? — Usaid, Mar 03 '23 at 05:03
Ya the 80vh worked. you can add it as a solution and i can approve it as a solution. gives you some credit — , Mar 03 '23 at 05:07

score 0 · Accepted Answer · answered Mar 03 '23 at 05:14

0

Since your footer is 20vh you can set the sibling of .footer-container to min-height: 80vh.

answered Mar 03 '23 at 05:14

Usaid

406
4
6

Force footer to the bottom when content not filling the page

1 Answers1