CODEWITHSUNDEEP
csshtml
user3036496
user3036496

Reputation: 5

Extending div to bottom of page not working

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

Upvotes: 0

Views: 125

Answers (3)

NoobEditor
NoobEditor

Reputation: 15871

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;

    }

Upvotes: 0

knrz
knrz

Reputation: 1811

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.

Upvotes: 2

Maciej Paprocki
Maciej Paprocki

Reputation: 1379

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

Upvotes: 0

Related Questions