размещен нижний нижний колонтитул с CSS

Question

Я хочу разместить нижний колонтитул на нижнем экране, как и положение: фиксированное и нижнее 0, если содержимого недостаточно. Но когда есть больше контента, я хочу нижний колонтитул после содержимого, а не фиксированный снизу.

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/

В этом случае вы видите в jsfiddle Я хочу колонтитула в нижней части.

Есть ли способ достичь этого без JS?

Answer 1

Может быть, вы должны искать Google для адаптивного дизайна, которые могли бы дать вам некоторое представление о тех видах поведения.

Twitter Bootstrap, например, позволяет делать такие вещи.
У вас есть Sticky footer, основанный на Twitter Bootstrap, который, кажется, делает то, что вы ищете.

Answer 2

Jeah это возможно, это используется только css с absolute позиционирование.

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

Answer 3

http://css-tricks.com/snippets/css/sticky-footer/ Я думаю, что это то, что вы хотите. Липкий нижний колонтитул. `Вы должны установить свой контент на минимальной высоте: 100%; в конечном итоге высота: 100%, и установите html, тело: высота: 100% тоже. Надеется, что это помогает

Answer 4

Вот ваш обновленный CSS с fiddle link

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