Css keeping the footer at the bottom

quinnd6 · 06-03-2015 6:27pm #1

Ok I've tried 2 methods of trying to keep the footer at the bottom of the content or the page and they do not work.
Sometimes the content of the page is going to go beyond the bottom of the screen and if I use the method that keeps the footer at the bottom of the screen I end up with the footer being in the middle of my content.

The other method I tried makes the footer go to the bottom of your content but if the page does not have enough content or text you end up with the footer plonked in the middle of the screen.
How is this problem solved?
I'm so sick of this I'm thinking of just leaving out the footer altogether.
Nothing I've come across so far on the web works properly.

sheesh · 06-03-2015 6:31pm

At the bottom of the Screen or the bottom of the webpage?

quinnd6 · 06-03-2015 6:34pm

Well I need both.
If there's not enough text I need the footer to be at the bottom of the screen.
If there is text that goes beyond the bottom of the screen making the viewer scroll I need to footer to go right down to the bottom of the text not stuck in the middle of my text.
So how the heck do I do that?

seamus · 06-03-2015 6:39pm

You define a container which has a minimum size of the whole screen, and put the footer at the bottom. That way, when there's very little text, the footer will sit at the bottom of the screen. When there's more than a screen, the footer sits below the content.

sheesh · 06-03-2015 6:39pm

I know you can get a div like the main nav to stay locked at the top of the screen and have content scroll behind it. so it should be possible.

I'll have a look......

sheesh · 06-03-2015 6:41pm

have you tried something like this

http://www.w3schools.com/css/css_positioning.asp

quinnd6 · 06-03-2015 6:43pm

Sorry which type of positioning are you talking about there?
Anyway looking at that no it doesn't solve the problem.
If you use absolute positioning to place the footer at the bottom of the screen you end up with the problem that if there is content that goes
below the bottom of the screen you end up with the footer in the middle of your content.
If you use relative positioning you end up with the footer in the middle of the screen if you do not have enough text.

sheesh · 06-03-2015 6:51pm

quinnd6 wrote: »

Sorry which type of positioning are you talking about there?

fixed positioning it is relative to the browser window

M.T.D · 06-03-2015 6:57pm

rephrasing the question

Do you want the footer to be at the bottom/end of the content or, if the content is not a full screen for the footer to be at the bottom of the screen.

In that case just give the div that contains your content a minimum height

quinnd6 · 06-03-2015 7:01pm

I want the website to satisfy both.
Sometimes there will not be enough content to fill up the entire screen so then I need the footer to go to the bottom of the screen.
Then in the situation where I have loads of content that goes beyond the bottom of the screen I need the footer to go to the bottom of the content.
Now you see my problem?

sheesh · 06-03-2015 7:11pm

Have you tried to use the min-height on the preceding content area.

M.T.D · 06-03-2015 7:12pm

same answer as previous poster

quinnd6 · 06-03-2015 7:34pm

I'm afraid I'm only a beginner at css really.
What should I have min-height set to?

Gordon · 06-03-2015 7:42pm

What browser are you catering for?

quinnd6 · 06-03-2015 7:58pm

The latest versions of all of them hopefully.

Gordon · 06-03-2015 8:11pm

Try this (resize browser to see):

<html>
<style type="text/css">
    html,
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    #wrapper {
    min-height:100%;
    position:relative;
    }
    #header {
    padding:10px;
    background:#ddd;
    }
    #content {
    padding:10px;
    padding-bottom:80px;
    }
    #footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ddd;
    }

</style>
    <body>
    <div id="wrapper">
    <div id="header">Top stuff</div>
    <div id="content">
    Content<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    .<br />
    </div>
    <div id="footer">Footer</div>
    </div>
    </body>
</body>
</html>

Got from here: http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Giblet · 07-03-2015 11:53am

<html>
<body>
<style>
html,body { margin:0; padding:0; }
.content { min-height:90vh;background-color:red; }
.footer  { height:10vh; background-color:green;}
</style>
<div class="content">Some Content here</div>
<div class="footer">Wasssup!</div>
</body>
</html>

caniuse.com/#feat=viewport-units

quinnd6 · 07-03-2015 10:29pm

That cssreset stuff linked to is great.
I believe I came across that at some point.
The reason it wouldn't work for me is because my divs weren't nested and closed in the right order.
Thanks very much for the help guys it seems to be working fine now with the cssreset css code.

Gordon · 07-03-2015 10:33pm

Footers are a pain in the bum, glad it's working.

Css keeping the footer at the bottom

Comments