HTML/CSS Выровняйте DIV до нижней части страницы и экрана - в зависимости от того, что наступит раньше

У меня есть div:

clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

И html, body:

html, body {
    height:100%;
    width:100%;
}


/* Body styles */
body {
    background:url(../images/background.png) top center no-repeat #101010;
    color:#ffffff;
}

Мой код в основном содержит 20 абзацев ipsum, а затем div.

Теперь я попытался установить положение относительно относительного и абсолютного и т.д., но с абсолютом div выравнивается в нижней части экрана, поэтому, когда вы прокручиваете вниз прокрутки div с ним

Я попробовал установить его относительно, но когда у вас недостаточно содержимого для прокрутки страницы, div не находится внизу страницы.

Я попытался исправить, но это просто исправлено. Мне не нравится

Как я могу получить div в нижней части экрана и страницы в зависимости от того, прокручивается ли или нет.

Ответ 1

Хорошо, исправлено и работает: D Надеюсь, он делает то, что вы хотите. Предпросмотр здесь: http://jsfiddle.net/URbCZ/2/

<html>
    <body style="padding:0;">
        <div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
            test content :D
        </div>
        <!--Content Here-->
    </div>
    </body>
</html>

Ответ 2

Вам нужно решение для javascript: часть исправлена, а часть - встроенная или абсолютная с js, чтобы решить. Есть jQuery вариант здесь? Здесь screencast: http://jqueryfordesigners.com/fixed-floating-elements/