Witam.

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>


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;
}


W jaki sposób mogę to zrobić?