Make footer get pushed off page by content but stay at bottom when not full page content

Question

i have a footer that i want to stay at the bottom of the page at all times but when e.g. the content fills the page the footer does not move down it just hovers over the text. The issue is that the content only starts to scroll on small windows and low res monitors. So i need the footer to stay at the bottom of a page with non filled content but then be pushed out the way by the content when the window is small

PICTURE: https://i.stack.imgur.com/DTvNh.jpg - Footer hovers over the content instead of being pushed down, but the scroll bars appear and the footer stays there when i scroll

Here is my CSS:

`
html, body {
        margin:0;
        padding:0;
}

#container {
}

#spacer {
        height: 10px;
        background-color: #24246B;
}

@font-face {
        font-family: palatino;
        src: url('font/palatino.ttf');
}

@font-face {
        font-family: footer;
        src: url('font/footer.ttf');
}

.fb_widget {
    float: right;
    margin-right: 10px;
}

#header, #nav, article, section, body, #mail_success {
        font-family: palatino;
}


#header {
    margin-top: 1%;
    text-align: center;


/*  font-size: 60px;
    color: #F2E6FF;
    border: solid #24246B;
    background-color: #24246B;
    width: 25.5%;
    border-right-color: #4610B3;
    border-right-width: 25px;
    border-left-width: 15px;
    margin-top: 2%;
    text-align: right;*/
}


#nav ul {
    margin-top: 2%;
    line-height: 30px;
    font-size: 17px;
    text-align: center;
    background-color: #24246B; 
}

#nav ul li {
    display: inline;
}

#nav ul li a {
    text-decoration: none;
    color: #F2E6FF;
    padding: 7px 2% 6px 2%;
    font-weight: bold;
    border-radius: 20%;

    /* This makes it fade colour*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition:. 5s;
    -webkit-transition: .5s;
    transition: .5s;
}

#nav a:hover {
    color: #24246B;
    background-color: #F2E6FF;
    border-radius: 20%;
}

body {
    background-image: url('media/bg.png');
    padding-bottom: 60px;
    height: 100%;
    max-height: 100%;

}

article {
    color: #24246B;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 20px;
    font-weight: bold;
}

section {
    font-weight: normal;
    font-size: 15px;
    text-align: justify;
    padding-left: 2%;
}

form {
    padding-left: 7%;
    font-size: 19px;
}

input {

    height: 25px;
    width: 300px;
    font-size: 14px;

}

.contact_submit {
    width: 110px; 
    margin-right: 50%;
    margin-left: 42%;
}

label {
    text-align: right;
    float: left;
    display: block;
    width: 260px;
    font-weight: bold;
}

label:after {
    content: "..";
    color: transparent;
}

#push {
    height: 4em;
}

footer {
    font-family: footer;
    color: #cccccc;
    font-size: 8px;
    text-transform: uppercase;
    font-style: italic;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

footer p{
    text-align: center;

}

footer:hover {

    /* This makes it transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition:. 5s;
    -webkit-transition: .5s;
    transition: .5s;
    color: #24246B;
    font-size: 12px;
}

#mail_success {
    text-align: center;
    padding: 7%;
    font-size: 17px;
    font-weight: bold;
}

@media screen and (max-device-width: 640px) {
    #logo {
        display: none;
    }
}'

and the HTML for the footer:

'   </div>
    <p></p>
        <footer>
            <p>&copy;2013 Built by Rob Calcroft</p>
            <p>Designed by Akash Bharadia &amp; Rob Calcroft</p>
        </footer>
    </body>
</html>

'

Make a google search for "sticky footer". You'll find many examples. — otinanai, Aug 01 '13 at 15:36
have you seen [this](http://ryanfait.com/sticky-footer/) ? hope it helps! — Lan, Aug 01 '13 at 15:36
Possible duplicate of [Make div stay at bottom of page's content all the time even when there are scrollbars](https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) — Jordan Garvey, Oct 10 '17 at 08:57

score 0 · Answer 1 · answered Aug 01 '13 at 15:40

0

in your html you have <footer> and css footer{ some-code}

shouldn't this be an id (if onyl used once per page) or class (if used multiple times per page)?

.footer

or

#footer

then

<div id="footer">text</div>

answered Aug 01 '13 at 15:40

James

4,644
5
37
48

Using the `
` is completely fine since it's part of HTML5. Unless you have to support older browsers which this won't work. Then using a div with the ID of `#footer` is fine.
– tokyovariable Aug 01 '13 at 15:47

Make footer get pushed off page by content but stay at bottom when not full page content

1 Answers1