Hack Forums
Footer Bottom Of Page - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Footer Bottom Of Page (/showthread.php?tid=5809896)

Footer Bottom Of Page - Malevolent - Mar 10, 2018

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.

RE: Footer Bottom Of Page - Bluffer - Mar 10, 2018

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

RE: Footer Bottom Of Page - Helltoy - Mar 10, 2018

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/


RE: Footer Bottom Of Page - Helltoy - Mar 10, 2018

(Mar 10, 2018 05:10 AM)Ben pid= Wrote:padding-bottom: 411px;

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

RE: Footer Bottom Of Page - Calibur - Mar 10, 2018

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

RE: Footer Bottom Of Page - ryan⚜ - Mar 11, 2018

(Mar 10, 2018 05:52 AM)Helltoy Wrote:  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'.

RE: Footer Bottom Of Page - Helltoy - Mar 12, 2018

(Mar 11, 2018 09:24 PM)ryan⚜ Wrote:  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.asp?filename=tryhow_css_fixed_footer)?

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

RE: Footer Bottom Of Page - Rushax - Mar 12, 2018

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.

RE: Footer Bottom Of Page - Ganja - Mar 12, 2018

(Mar 12, 2018 06:14 AM)Rushax Wrote:  
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).

RE: Footer Bottom Of Page - Tasemu - Mar 12, 2018

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.