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 абзацев loren ipsum, за которыми следует div.

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

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

Я попробовал исправить, но это только что исправило .. мне бесполезно

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