How to adjust the height of the footer automatically

Question

How do you adjust the height of the footer based on how long the div content inside the body is?

I've tried searching for a solution like having the position of the footer "fixed" but it isn't what I want because it's like stuck at the bottom of the screen. I want the footer to show when I reach the bottom of the page and change its height automatically when the main_content height changes as well since I've put the height of the main_content to auto. How can I do this?

Here's how it looks like: http://jsfiddle.net/cherry12345/t62b2qb6/

Heres my code:

HTML

<body>
    <div  id="main_content">
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    <div id="footer">
        &copy; 2014-2015 example.com. All Rights Reserved.
    </div>
</body>

CSS

#main_content {
    width: auto;
    height:auto;
    position:absolute;
    top:110px;
    left:400px;
    background: #FFF;
    border:1px solid lightgray;
}   
#footer{
    position:absolute;
    bottom:0px;
    width:100%;
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

You want the footer height to be proportional to the height to the main content area? — Jared Farrish, Sep 21 '14 at 17:03
Could you expand on `[...] and change its height automatically when the main_content height changes.`? — Hashem Qolami, Sep 21 '14 at 17:04
Yes like have it at the bottom of the main content area. I made a lot of pages and they are all different in heights so I want the footer to be at the bottom of the main content however long the main content is — noob1234, Sep 21 '14 at 17:04
Then put it at the bottom of the `#content` div. You're trying too hard with positioning, it looks like. — Jared Farrish, Sep 21 '14 at 17:05
So you really don't want to alter the `height` of the footer, do you? — Hashem Qolami, Sep 21 '14 at 17:06
Have a look at [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?lq=1). More explanation here: [Position footer at bottom of page having fixed header](http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header). — Hashem Qolami, Sep 21 '14 at 17:08
this is called ***sticky footer***. See http://www.cssstickyfooter.com/ — Gabriele Petrioli, Sep 21 '14 at 17:09

score 0 · Answer 1 · answered Sep 21 '14 at 17:08

I think that this would help:

#main_content {
    width:auto;
    background: #FFF;
    border:1px solid lightgray;
}   

#footer{
    width:100%;
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

Fiddle

score 0 · Accepted Answer · answered Sep 21 '14 at 17:13

You can re-arrange and drop the positioning and get it to work like this:

#main_content {
    background: #FFF;
    border:1px solid lightgray;
}
#main_content > p {
    margin-left: 440px;
}
#main_content > p:first-child {
    margin-top: 110px;
}
#footer {
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

<div id="main_content">
    <p>Some text</p>
    ...
    <p>Some text</p>
    <div id="footer">&copy; 2014-2015 mysite.com. All Rights Reserved.</div>
</div>

http://jsfiddle.net/t62b2qb6/3/

score 0 · Answer 3 · answered Sep 21 '14 at 17:13

Define your html as follow:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

And CSS (note that footer should be absolute, and wrapper be relative)

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

http://jsfiddle.net/3n52zt2h/

How to adjust the height of the footer automatically

3 Answers3