Sticking a footer at the bottom of the page (perhaps Flex or Bootstrap?)

HTML-CSS
1

I’m currently finishing up my survey form: https://codepen.io/Crimson_Macaw/pen/PBNvMp and have no idea how to get my footer to stick to the bottom of the page. I think I’ve tried every css method that I’ve found. The only methods I haven’t tried is with bootstrap or flex.

My reticence to using flex or bootstrap is that I’ve already spent many, many hours on the design and layout of the page, and redoing the entire thing in flex or bootstrap would probably entail another whole week of work just to get a footer to stick to the bottom of the page. However, if it’s possible to somehow add small elements of bootstrap, flex, or even JavaScript to make the footer stay at the bottom then I’m all for it.

Please note that I’m not looking to fix the footer to the bottom of the screen, but to the bottom of the webpage.

2

Please try:

position: fixed;

read more: https://www.w3schools.com/cssref/pr_class_position.asp

3

All position: fixed seems to do is fix the footer to the bottom of the screen, and not to the bottom of the webpage.

4

You need a position: absolute; bottom: 0; on your footer element to stick at the bottom no matter how much content you have.

5

Here a quick and dirty demo pen

6

I’m not sure if you’ve viewed my pen that I linked to, but it has all that already. I’ve tried different combinations of position absolute, bottom:0, left:0, right:0 and width: 100%.

7

There are some of the resources I’ve found that have helped me with this problem:

https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

and

But I’ve found that with flexbox is really easy, and no too much trouble.

8

Would you be able to fork my pen and show me how you would use flexbox to make my footer stick to the bottom?

I’ve already read through the css tricks page, but I’m not sure if it applies to my situation, since it would require a complete rewrite of the page according to flexbox.

9

I will try. I am no expert, last week I remade the layout of my portfolio project using flexbox to practice and replace bootstrap, not too bad doing a complete rewrite, also now the code is cleaner and simple than it was before.

Here are two approaches to experiment with:

I think this would apply for both approaches (the plain css and flexbox) is to look at the page as chunks or boxes or big parts. Identify the main parts of your page.

Approach 1: just css
For example, if the children of body are: header, main and footer, distribute the height of the viewport between them so the total min-height sums up to 100vh. See this template I made https://codepen.io/zdflower/pen/RBpNKa

Approach 2: flexbox
This is a similar template https://codepen.io/zdflower/pen/NBpPXy but using the flexbox ideas from the css tricks page.

See if you can adapt this to your project.

With your project I would change (without using flexbox):

.box {
position: relative; /* instead of absolute, so it stays on the normal flow of the page. */
min-height: 100vh;
top: 30%; /* 50% seems to much and the content overlaps with the footer, I am not sure why. */
/* keep the rest the same */
}

header {
min-height: 30vh;
}

.footerclass{
/* delete position:absolute; */
}

Some links about position property, to see the diferencies between absolute and relative, for example:

Extra comment: maybe in the future you could rewrite this project and make it more responsive and adaptable to smaller screens too.

10

Here your forked pen. Hope its how you want it to look.

Made some minimal changes in box class and footerclass.

11

Thanks sonrir, this is exactly what I was looking for.

In the future I’ll just stick to using CSS Grid or CSS Flex instead of trying to experiment without them.