CODEWITHSUNDEEP
csstwitter-bootstrap
LukePOLO
LukePOLO

Reputation: 1118

Body Height pushing down footer too far

I am having trouble with my body extending my footer too far.

My CSS:

body{
    background-color:#EDEDED !important;
    background-image:url('http://static.lukepolo.com/public/assets/img/broken_noise.png') !important;
}

body > .container{
    min-height:100%;
}

html, body {
    height: 100%;
 }

footer{
    padding:10px;
    background-image:url('http://static.lukepolo.com/public/assets/img/broken_noise.png') !important;
    color:white;
}
footer p{
    display:inline-block;
}

My HTML: 

<div class="container">

</div>
<footer>
        <?php echo $footer;?>
</footer>

Here is my link: http://lukepolo.com/blog

Upvotes: 0

Views: 1735

Answers (3)

Paulo R.
Paulo R.

Reputation: 15609

This is a fairly common css problem, and as so there's a typical solution.

You need to pull the footer up by adding a negative margin-top to it, that's equal to it's height. Then to ensure that it doesn't overlap any of the content inside .container, add, this time to .container, a padding-bottom that's also equal to the footer's height (equal or higher).

Upvotes: 2

jeffjenx
jeffjenx

Reputation: 17487

You could remove the:

body > .container{
    min-height:100%;
}

since that is what is causing the footer to be off the screen.

Upvotes: 0

algiecas
algiecas

Reputation: 2128

Well, the scrollbar appears because you add padding to the footer.

I you're trying to achieve sticky footer, then this might help you: http://www.cssstickyfooter.com/

Upvotes: 1

Related Questions