将div扩展到页面底部不起作用

Question

I have been trying to fix the length of this div for awhile, and I'm sure it is something completely simple, just not seeing it. The div for the content "page" is extending well beyond the footer and I can manipulate the length with the min-height property in css however I want to make sure that the footer/"page" div extend to bottom regardless of the content so I don't want to set a definite length for the div.

EDIT : jsfiddle: http://jsfiddle.net/F2SMX/

Footer cs

#footer {
    background: #365F91;
    color: #000000;
    width:100%;
    height: 35px;

    position:relative;

    bottom:0px;
    clear:both;
}

#footer p {
    margin: 0;
    text-align: center;
    font-size: 77%;
}

#footer a {
    text-decoration: underline;
    color: #FFFFFF;
}

#footer a:hover {
    text-decoration: none;
}

changing footer position from relative to absolute had no change

Answer 1

Change relative to absolute , and remove min-height from #page .

#footer { position: absolute; }

You'll also need to make sure that you only have 1 #page per page.

Working fiddle .

Answer 2

You want to use something called sticky footer.

http://css-tricks.com/snippets/css/sticky-footer/

Or you can use my solution without using pseudo class :after

EDIT: sorry here you have my solution to problem with div instead of after http://codepen.io/anon/pen/LsFIn

Answer 3

Go old school.....add this to you css of #footer

bottom: -500px;
padding-bottom: -500px;

working demo

CSS

#footer {
        background: #365F91;
        color: #000000;
        width:100%;
        height: 80px;
        position:relative;
        bottom: -500px; /* push to the bottom */
        padding-bottom: -500px; /* maintain equilibrium by giving footer its height!!*/
    }

EDIT

to make footer stretch to height, if content exceeds

demo

#footer {
        background: #365F91;
        color: #000000;
        width:100%;
        min-height: 80px; /*change height to min-height, this will always cover the content height*/
        position:relative;
        bottom: -500px;
        padding-bottom: -500px;

    }

If you want a scrollable footer if content exceeds

demo

#footer {
        background: #365F91;
        color: #000000;
        width:100%;
        height: 80px; /*keep height fixed*/
        overflow-y:scroll; /*scroll when content size increases */
        position:relative;
        bottom: -500px;
        padding-bottom: -500px;

    }