CODEWITHSUNDEEP
htmlcsssticky-footer
Lee Hibberd
Lee Hibberd

Reputation: 99

Sticky Footer problems.. Here's another one

Firstly, apologies for what appears to be a very common question, looking at the amount of similar questions, you are forgiven for being annoyed at yet another, but regardless of all the others that I have read (and tried to implement), and many other links found on Google, I'm still struggling to solve my problem, so I'm sorry, but here goes..

The footer I have is fine when the main content is longer than the browser window, but when there is very little content, rather than sticking to the bottom of the browser window, it sticks to the bottom of the main content, leaving a horrible blank space below the footer.

I've created a simple(ish) fiddle HERE using a stripped down version of my code.. here is the code for those that are able to see the issue without "fiddling"..

<body>
    <!-- Header -->
    <div id="header-wrapper">
        <header class="5grid-layout" id="site-header">
            <div class="row">
                <div class="12u">
                    <div id="logo">
                            <h1 class="mobileUI-site-name">HEADER</h1>

                    </div>
                </div>
            </div>
        </header>
    </div>
    <!-- Main -->
    <div id="main-wrapper" class="subpage">
        <div class="5grid-layout">
            <div class="row">
                <div class="12u">MAIN CONTENT </div>
                          </div>
        </div>
    </div>
   
    <!-- Footer -->
    <div id="footer-wrapper">
        <footer class="5grid-layout" id="site-footer">
            <div class="row">
                <div class="12u">PROBLEM FOOTER</div>
            </div>
        </footer>
    </div>
</body>

and here is the css..

#header-wrapper {
    background: #12ff00;
    height: 110px;
    position: relative;
    padding: 0.0em 0 1em 0;
}
#main-wrapper {
    border-top: 3px solid #662d91;
    border-bottom: 3px solid #662d91;
    background: #ff5a00;
    position: relative;
    padding: 1em 0 2em 0;
 
   
}
#footer-wrapper {
    background: #ff00fc;
    position: relative;
    padding: 1em 0 1em 0;
    height: 100px;
   
}

Granted, a lot of the above Divs aren't needed for the sake of this demo, but I have left them in just in case it is one of these thats causing the problem. I'm still new to this, so I honestly have no idea.

so basically, how on earth do I get that footer to behave, previous attempts based on other Stack Overflow answers have left me with either no footer, or a footer that sits in the center of the screen regardless of whether there is a lot or little content.

Any help will be gratefully received.

Upvotes: 1

Views: 721

Answers (3)

Barnee
Barnee

Reputation: 3389

Have you tried:

html, body {
   height: 100%;
   min-height: 100%;
}
#main-wrapper {
   height:100%;
}

Here's a working DEMO1

UPDATES:

I've changed a few things in your code, but now its working!

Here are the changes:

  • added a #container for the header and main divs.
  • I've changed the footer padding from em to px, because I need precise height.
  • I gave the main-wrapper's background to #container
  • and the border-bottom to footer as border-top

DEMO2

Upvotes: 1

medina
medina

Reputation: 776

I have answered this question before

Click Here

Or see this JSFiddle for a working example of a sticky footer.

HTML

<div class="wrapper">
   <div class="header"></div>     
</div>      
<div class="footer"></div>

CSS

* {margin: 0;}
html, body {height: 100%;}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */}

.footer { height: 200px;background-color:#000;}

The idea is that the bottom margin is the negative value of the footers height

Upvotes: 2

Ramiro Motteta
Ramiro Motteta

Reputation: 104

The way I ussualy do this is using http://www.cssstickyfooter.com/using-sticky-footer-code.html

If you can, try to stick close to that, it has compatibility with older browsers.

I didn't find better alternatives to this and is well explained

Upvotes: 0

Related Questions