css sticky footer in an asp.net page

I am trying to create a footer that sticks to the bottom of the page. I have:

<body>
    <form id="form1" runat="server">
    <div id="wrap">
        <div id="content">
            <uc2:logo ID="logo1" runat="server" />
        </div>
    </div>
    <uc1:footer ID="footer1" runat="server" />
    </form>
</body>

Here is my css

body {
    margin: 30px 10px 0px 10px;
    font-size: 14px;
    font: 76% Arial,Verdana,Helvetica,sans-serif;
}
html, body, form, #wrap { height: 100%; }
form > #wrap { height: auto; min-height: 100%; }

#wrap {
    width: 1000px;
    margin: auto;

}

#content {

    text-align:left;

}


#footer {
 clear: both;
 position: relative;
 z-index: 10;
 width:1000px;
 margin:auto;
}

What am I missing? The footer appears below the viewport (scrollbars are also on the page). I’m expecting it to be some type of margin issue.

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Look at this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Method 2

Try position absolute :

#footer {
 clear: both;
 position: absolute;
 z-index: 10;
 width:1000px;
 margin:auto;
 bottom:0px;
 height:50px;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating