[Malevolent]

Is there a way to make the footer load so there is no white space below it?

Example:
https://tascware.com/blogs/forumdisplay.php?fid=2

Thanks to anyone who can help.

I have tried about 4-5 methods so far, all with their own respective downsides.

[Bluffer]

Can ya post some code? Would make things easier. The css will suffice.

[Helltoy]

1.

Code

.body {
padding-bottom: 411px; (height of footer)
position: relative;
}
.footer {
position: absolute;
right: 0;
left: 0;
bottom: 0;

2. From Stackoverflow

Code

Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer  height: 1px;, and give your content area height: auto;

3. Use bootstrap

Code

https://getbootstrap.com/docs/4.0/examples/sticky-footer/
https://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/

[Helltoy]

padding-bottom: 411px;

Try removing that line

Why should I remove it? It's one of ways to make sticky footer.

[Calibur]

Try this:

Code

.container {
    min-height: calc(100vh - 518px);
}

it might conflict if other parts/structure of your forum uses that class. So i suggest you to just add a new div container so you can wrap the entire BODY (header & footer ecluded) of your website except the following div:
.header
.header_bg
.footer

[ryan⚜]

Why should I remove it? It's one of ways to make sticky footer.

You should remove it for a few different reasons.

1) Bootstrap includes a sticky-footer class you can use already so any alternative code isn't really needed.

Code

.fixed-bottom .sticky-bottom

2) That isn't the way to make a 'sticky footer' that's just some random fix that makes it look fine on your screen, but probably doesn't look right to others.

Remove all margins/classes that you've added to make it stick to the bottom. Add class, 'fixed-bottom'.

[Helltoy]

You should remove it for a few different reasons.

1) Bootstrap includes a sticky-footer class you can use already so any alternative code isn't really needed.

Code

.fixed-bottom .sticky-bottom

2) That isn't the way to make a 'sticky footer' that's just some random fix that makes it look fine on your screen, but probably doesn't look right to others.

Remove all margins/classes that you've added to make it stick to the bottom. Add class, 'fixed-bottom'.

1. Op currently doesn't use bootstrap(or I missed it).
I never heard for class "sticky-bottom" and can't find it in documentations. But if you make footer "fixed", footer will it be always there and goes over other content (https://www.w3schools.com/howto/tryit.as...xed_footer)?

2. Recommended by a lot of users (on stackoverflow) and different sites. Here is live example https://codepen.io/elmahdim/pen/Djlax

[Rushax]

Code

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

Might need to have an overflow-y: hidden in there too if you're not using any frameworks.

[Ganja]

Code

footer{
   position: absolute;
   bottom: 0;
   width: 100%;
   left: 0;
}

Might need to have an overflow-y: hidden in there too if you're not using any frameworks.

Don't do this, it'll fuck your footer up when the content hight is > 100vh.


I'd suggest using flexbox (https://caniuse.com/#feat=flexbox):

Code

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

.container:first-of-type {
     flex: 1;
}

(you should replace '.container:first-of-type' with 'main' or a wrapper-class that'll wrap all your content).

[Tasemu]

make sure your html and body css is set to height:100%, from there you have multiple options. If you dont care about old browser support then I recommend flexbox. Not gonna write it out for you, its easy with some google.