Moja strona wizualnie wygląda tak:

Jak rozciągnąć granatowe tło na całą stronę w osi Y tak, aby było niezależne od długości tekstu ?
Plik CSS:
html, body { margin-top: 0; margin-bottom: 0; font-family: verdana, arial; color: #fff; background: #333; font-size: 12px; }
img { border: 0px; }
a img{ border: 0px; }
a:link, a:visited, a:hover, a:active { color: white; }
p { text-align: justify; padding-left: 20px; padding-right: 20px; }
#content { margin: 0px; width: 900px; background: #030c11; }
.tj { text-align: justify; }
.tc { text-align: center; }
.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.pt30 { padding-top: 30px; }
.pt20 { padding-top: 20px; }
.pb30 { padding-bottom: 30px; }
.pl10 { padding-left: 10px; }
.pr10 { padding-right: 10px; }
.pl20 { padding-left: 20px; }
.pr20 { padding-right: 20px; }
.pb0 { padding-bottom: 0px; }
.pb10 { padding-bottom: 10px; }
.pb3 { padding-bottom: 3px; }
.w450 { width: 450px; }
Próbowałem już w klasie #content ustawiać
height na 100%, auto, itp. ale nie pomagało. Ma ktoś może jakiś pomysł ?