Footer Always On The Boottom Without Display:fixed

March 31, 2024 Post a Comment

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

Solution 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

Solution 2:

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.

Solution 3:

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);
        }
});

Solution 4:

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

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

See it in action with this fiddle

Solution 5:

**HTML**
<divclass="mydiv">
  Suspendisse potenti.
</div><footerclass="smallFooter"><p> @EDUARDVALENTIN 2015 </p><ahref="https://www.facebook.com/danadesignsartoria?fref=ufi"><imgsrc="img/fb-logo.png" /></a><ahref="#"><imgsrc="img/instagram-logo.png" /></a><ahref="https://www.youtube.com/channel/UCqe4oWvPuSP8kTL70V1P9Gg/feed"><imgsrc="img/yt-logo.png" /></a><ahref="https://twitter.com/SartoriaAsti"><imgsrc="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;
}



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

}


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

}

$(".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.

Html5 Academy