Rozciąganie stopki na stronie www

Mam pewien problem ze stopką na stronie www.
Mam szablon, który jeśli strona ma mało treści to przesuwa mi footer czyli stopkę zaraz tu gdzie kończy się treść. Chciałbym aby ta stopka rozpoczynała się tu gdzie się kończy ta treść, ale aby się rozciągała, aż do samego końca ekranu. Mam coś takiego:

A chcę uzyskać tak jak jest na stroie Orange.pl:

W pliku CSS mam kod dla footer,

 #footer {
	background: url("images/foot.png") repeat;		
}

**który odpowiada za wyświetlanie obrazu **czyli nakłada kolor ten czarny pasek ale dziedziczy on po kodzie z body

body {
    color: rgb(51, 51, 51);
    font-family: Arial,Helvetica,sans-serif;
    line-height: 20px;
    font-size: 14px;
} 

line-height: 20px i jak go zwiększę z 20 np. do 40 to zwiększa się pasek footer jest wtedy szerszy 2x, ale to rozwiązanie powoduje, że jak strona wyświetla się dobrze jest sporo treści, to i ten pasek ze względu, że jest statyczny ma te 40px zawsze ponadto ta zmiana powoduje, że w innym elemencie na stronie też przesuwa mi się element.

Więc jak zrobić, aby kiedy jest mało treści i footer zaczyna się od środka ekranu, aby się on automatycznie rozłożył czyli rozciągnął w dół do końca ekranu tak aby zakryć białe pole, które w ten sposób nieestetycznie wygląda. Czyli aby było tak jak jest na Oarnge.pl

gdzies z sieci

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* wysokosc stopki */
}
.footer, .push {
	height: 142px; /* .push musi miec ta sama wysokosc co  .footer */
}

.footer, .push {
	background: url("images/foot.png") repeat;
}

<div class="wrapper">
     <p>Twoja strona</p>
     <div class="push"></div>
</div>
<div class="footer">
     <p>stopka</p>
</div>

Najprościej - po prostu html i body niech mają kolor tła, który Cię interesuje. A od góry elementom nadawaj już inne tło. Tyle ;) Żadnych hacków, tricków i nie wiadomo czego.