CODEWITHSUNDEEP
htmlmobilescrollsticky-footer
Christopher
Christopher

Reputation: 13147

HTML footer stick to the bottom of the window

Im writing a web app and trying to get the footer to stick to the bottom of the window. When the content is larger then the window the footer is pushed down. Is there anyway to get it to stick to the bottom of the window and allow the content to scroll??

HTML is...

   <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html { 
            height: 100%;
        }

        body {
            height: 100%;
        }

        .page {
            width: 100%;
            min-height: 100%;
        }

        .push {
            padding-bottom: 4em;
            overflow: auto;
        }

        #footer {
            position: relative;
            margin-top: -4em;
            height: 4em;
            clear: both;

            background-color: red;
        }
        </style>
</head>

<body>
    <div class="page">
        <div id="content">
         <p>content goes here</p>
        </div>
        <div class="push"></div>
    </div>
    <div id="footer">
        <p>This is the footer block.</p>
    </div>
</body>

Upvotes: 0

Views: 1411

Answers (2)

JaredH20
JaredH20

Reputation: 368

Put everything in the Main in a Wrapper and use the following:

html, body, form
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;   (-80px will be different for you, usually the same as the footer but negative but mine is different)
}

#footer, .push
{
    height: 60px;   (This is jus the height of MY footer, change this to whatever size your footer is)
}

Upvotes: 0

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99909

Try this:

    body {
        height: 100%;
        margin-bottom: 4em;
    }

    #footer {
        position: absolute;
        bottom: 0;
        height: 4em;
        clear: both;

        background-color: red;
    }

Upvotes: 1

Related Questions