Footer always on the boottom without display:fixed

Question

I want to make my footer display always on the bottom of the page even when the content does not fill the page, but when the content fills the page i want it to display only when i scroll to the very bottom of the page. I was thinking to check if the page can be scrolled with JavaScript and if no I'll add a class to make footer fixed else if yes ill remove that class, but I don't know how to check that with JavaScript. The idea is, I want my footer fixed when I cant scroll ,and when I can scroll I don't want it fixed. How can I do that ? My footer HTML is :

<footer class="smallFooter">
            <p> @EDUARDVALENTIN 2015 </p>
            <a href="https://www.facebook.com/danadesignsartoria?fref=ufi"><img src="img/fb-logo.png" /></a>
            <a href="#"><img src="img/instagram-logo.png" /></a>
            <a href="https://www.youtube.com/channel/UCqe4oWvPuSP8kTL70V1P9Gg/feed"><img src="img/yt-logo.png" /></a>
            <a href="https://twitter.com/SartoriaAsti"><img src="img/twitter-logo.png" /></a>
        </footer>

And CSS:

.smallFooter{   
    bottom:0;
    width:100%;  
    position:fixed;
    height:35px;
    background-color:#0E0E0E ;

}



.smallFooter p{
    position:absolute;
    display: inline-block;
    box-sizing:border-box;
    color:white;
    font-size:10px;
    float:left;

}


footer img{
    width:25x;
    height:25px;
    display:inline-block;
    float:right;
    margin-right:3%;
    padding-top:8px;

}

Check [this](http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/) out. — divy3993, Aug 20 '15 at 17:42
possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — divy3993, Aug 20 '15 at 17:44

score 1 · Accepted Answer · answered Aug 20 '15 at 17:49

1

Just set min-height in your "containter" element above your footer.

min-height: 100%

Set the position of your footer as absolute.

Here is an example: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

answered Aug 20 '15 at 17:49

Ricardo Pontual

3,749
3
28
43

ryachza · Answer 2 · 2015-08-20T17:47:55.323

0

The solution I've used before is this sticky footer

The footer height needs to be known, and the most important pieces are the body height and wrapper with the min-height and negative margin-bottom.

edited Aug 20 '15 at 17:47

answered Aug 20 '15 at 17:41

ryachza

4,460
18
28

Farhan · Answer 3 · 2015-08-20T17:47:55.513

Get document height and other content height like in code

//$(".site_wrapper").height() -> Content height which is your center warraper
//$(".header_wrapper").height() ->  header wrapper height
//$(".header_wrapper").height() -> footer warpper height
//$(".site_wrapper").height() -> your complete page's wrraper
$(document).ready(function(){
if($(document).height() > $(".site_wrapper").height()){
            var dHeight = $(document).height();
            var fHeight = $(".footer_warpper").height();
            var hHeight = $(".header_wrapper").height();
            var height = dHeight -  (fHeight + hHeight) - 50; //adjust 50 +/- according to your page
            $(".main_table").css("height",height);
        }
});

If this were to be used it should probably be bound to window resize, but it's also something that shouldn't require JS at all unless doing something unusually complex. — ryachza, Aug 20 '15 at 17:46

score 0 · Answer 4 · answered Aug 20 '15 at 17:48

For a CSS-only solution that doesn't depend on fixed height, use display: table.

CSS

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
}
.content {
    display: table-row;
    height: 100%;
}
.smallFooter {
    display: table-row;
    height: 1px;
}

HTML

<div class="content">
    <p>Main content goes here.</p>
</div>
<footer class="smallFooter">
    <p>Footer content goes here</p>
</footer>

See it in action with this fiddle

score 0 · Answer 5 · answered Aug 20 '15 at 17:52

**HTML**
<div class="mydiv">
  Suspendisse potenti.
</div>

<footer class="smallFooter">
        <p> @EDUARDVALENTIN 2015 </p>
        <a href="https://www.facebook.com/danadesignsartoria?fref=ufi"><img src="img/fb-logo.png" /></a>
        <a href="#"><img src="img/instagram-logo.png" /></a>
        <a href="https://www.youtube.com/channel/UCqe4oWvPuSP8kTL70V1P9Gg/feed"><img src="img/yt-logo.png" /></a>
        <a href="https://twitter.com/SartoriaAsti"><img src="img/twitter-logo.png" /></a>
    </footer>

CSS

html,body{
height:100%;
padding:0;
margin:0;
}
.mydiv{
    background : red;
}
.smallFooter{   
 width:100%;  
height:35px;
background-color:#0E0E0E ;
position:relative;
}



 .smallFooter p{
position:absolute;
display: inline-block;
box-sizing:border-box;
color:white;
font-size:10px;
float:left;

}


footer img{
width:25x;
height:25px;
display:inline-block;
float:right;
margin-right:3%;
padding-top:8px;

}

JS

$(".mydiv").css({"min-height":($("body").outerHeight()-$(".smallFooter").outerHeight())});

You can try something like this as well using a little bit of Jquery. Does this help? Have the body take full height and the remaining contents take what is left.

http://jsfiddle.net/53hf73nL/1/ when there is a lot of content http://jsfiddle.net/53hf73nL/2/ when there is not much content.

Footer always on the boottom without display:fixed

5 Answers5

Linked