CODEWITHSUNDEEP
asp.netcss
jeegnesh
jeegnesh

Reputation: 328

footer need to be always at bottom while page is expand

here is my Aspx Code and footer need to be always at bottom while page is expand

, , Please Wait... > Powered By FFReporting" CssClass="footer" Font-Italic="false" Font-Bold="false" Font-Size="X-Small" ForeColor="#000">

here is the css file

.wrapper
{
    min-height: 99%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -15px;  /* ;the bottom margin is the negative value of the footer's height */
    padding: 0;
}
.footer, .push
{
    height: 16px; /* .push must be the same height as .footer */
    clear: both;
    text-align: center;
    /*font: 10px Verdana, Arial;*/
    font: 10px Arial;
    background: url("../Images/invida_06.jpg") repeat-x;
    /*background-color: #497097;*/
    color: White !important;
}

I need bottom line always be at bottom, also when page has less information ,but when page have more displayed data then ,it always be printed after all data

i tried everything which is in this site but no solution is found till. help me!!!

Upvotes: 0

Views: 2347

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now used to this code

This is exmaple css code 

html, body {height: 100%;}

#wrap {min-height: 100%;background:red;}

#main {overflow:auto;
padding-bottom: 180px;}  /* must be same height as the footer */
#footer {position: relative;background:green;
margin-top: -180px; /* negative value of footer height */
        height: 180px;
        clear:both;}

HTML

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

Live Demo

Upvotes: 1

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

This technique always work, It's called Sticky Footer

Upvotes: 2

Related Questions