Web制作から3年以上離れていてほぼ初心者のため、力をお貸しください！
とある<div>で括ったエリアを、ウィンドウの高さが小さくなって隠れてしまう時だけposition:fixed; bottom:0; のようにウィンドウ下部に固定表示させたいのですが、方法がわかりません。

ざっくりとHTMLは以下の通りです。

<div class="contents">
<header>ヘッダー</header>
<img>
<div class="text">ここのdivを動かしたい</div>
</div>

レスポンシブ対応させたいので、<header>、<img>の高さは、ウィンドウサイズによって変わるようになっています。

どうぞよろしくお願いします。