CODEWITHSUNDEEP
htmlcss
Sir l33tname
Sir l33tname

Reputation: 4340

placed a footer bottom with CSS

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?

Upvotes: 0

Views: 214

Answers (4)

d6bels
d6bels

Reputation: 1482

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.

Upvotes: 1

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

Here is your updated css with fiddle link

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

Upvotes: 1

myput
myput

Reputation: 422

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

Upvotes: 1

Tdelang
Tdelang

Reputation: 1308

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

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

Upvotes: 0

Related Questions