Cały dzień dzisiaj siedzę nad rozwiązaniem tego problemu i nic nie mogę wynaleść. Strona ma taki układ:

I chcę aby div .content był zawsze rozciągnięty do początku .footer'a. Niestety opcja height: 100% nie daje oczekiwanych rezultatów.
Oto kod strony i plik CSS:
Kod
<body>
<div class="wrapper">
<div class="top_back">#To jest nagłówek strony wraz z menu</div>
<div class="content">#Tutaj ma się zawierać treść główna</div>
</div>
<div class="footer">#To jest stopka strony</div>
</body>
<div class="wrapper">
<div class="top_back">#To jest nagłówek strony wraz z menu</div>
<div class="content">#Tutaj ma się zawierać treść główna</div>
</div>
<div class="footer">#To jest stopka strony</div>
</body>
Kod
body {
margin: 0px;
height:100%
}
html {
height:100%
}
.top {
width:100%;
height:298px;
margin: auto;
vartical-align:top;
background: url(gfx/top_back.png) repeat-x
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -65px;
background: #FFFFFF;
}
.content {
width: 750px;
margin: auto;
padding: 10px;
border: 1px solid red;
height: 100%
}
.footer {
height: 65px;
color: #9A9A9A;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
background: #000000;
}
margin: 0px;
height:100%
}
html {
height:100%
}
.top {
width:100%;
height:298px;
margin: auto;
vartical-align:top;
background: url(gfx/top_back.png) repeat-x
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -65px;
background: #FFFFFF;
}
.content {
width: 750px;
margin: auto;
padding: 10px;
border: 1px solid red;
height: 100%
}
.footer {
height: 65px;
color: #9A9A9A;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
background: #000000;
}
W jaki sposób mogę to zrobić?