placed a footer bottom with CSS

Question

I want place my footer on bottom screen like position: fixed and bottom 0 if there is not enough content. But when there is more content I want the footer after the content and not fixed at bottom.

HTML

<div id="header">Header</div>
<div id="content">
    Bla
</div>
<div id="footer">sdfasdf</div>

CSS

#header { background-color: gray; padding: 10px;}
#footer { background-color: black; padding: 10px;  color:white;}

http://jsfiddle.net/FJWZu/

In this case you see in the jsfiddle I want the footer at bottom.

Is there a way to achieve this without JS?

possible duplicate of [How to align footer (div) to the bottom of the page?](http://stackoverflow.com/questions/3525581/how-to-align-footer-div-to-the-bottom-of-the-page) — Shadow The GPT Wizard, Aug 05 '13 at 08:12

score 1 · Answer 1 · answered Aug 05 '13 at 08:12

1

http://css-tricks.com/snippets/css/sticky-footer/ I think it's what you want. A sticky footer. `You have to set your content at min-height: 100%; eventually height: 100%, and set your html, body to: height: 100% too. Hope it helps

answered Aug 05 '13 at 08:12

myput

422
1
10
26

score 1 · Answer 2 · answered Aug 05 '13 at 08:18

1

Here is your updated css with fiddle link

#footer { background-color: black; padding: 10px;  color:white; position: absolute;
    width: 96%;bottom:0;}

answered Aug 05 '13 at 08:18

Swarnamayee Mallia

2,004
14
11

score 1 · Accepted Answer · answered Aug 05 '13 at 08:20

Maybe you should search Google for responsive design which could give you some insights about those kind of behaviors.

Twitter Bootstrap for example allows doing such things.
You have the Sticky footer, based on the Twitter Bootstrap that seems to do what you are looking for.

score 0 · Answer 4 · answered Aug 05 '13 at 08:11

0

Jeah that's possible, this uses only css with absolute positioning.

http://jsfiddle.net/FJWZu/3/

answered Aug 05 '13 at 08:11

Tdelang

1,298
2
12
20

placed a footer bottom with CSS

4 Answers4