Colonne alla massima altezza

[Chef89]

Salve,
ho la necessità d'impostare l'altezza delle colonne al 100% dello spazio tra la header e il footer solo con i div.

Ho visionato molte soluzioni e provato a impostare l'altezza al 100% ovunque, html e body inclusi, ma non riesco a farlo funzionare come vorrei

La struttura è composta da una header fluttuante alla sinistra del container (#wrapper) a sua volta situato al centro della schermata. Il footer è posizionato al bottom page e vorrei che le 2 colonne (#left e #right) arrivassero fino al footer occupando tutta la larghezza del container.

Se impostassi la posizione assoulta e top, bottom 0 e rispettivamente right o left 0 a seconda della colonna ottengo il risultato a metà.. ho le colonne che occupano tutta l'altezza della pagina ma "sforano" i margini del container partendo dai bordi dello schermo.

Vi riporto il codice e spero riuscite ad aiutarmi, grazie 1000.

<div id="container">
  <div id="wrapper">
    <div id="header">
      <header>
        <h1 id="logo">
          <span>Logo</span>
        </h1>
      </header>
    </div>
    <div id="content">
      <aside>
        <div id="left" class="column">
          <section>
            <nav>
              <ul>[*]Link[*]link[*]link[/list]
            </nav>
          </section>
        </div>
      </aside>
      <section>
        <div id="right">
          <article>
            <header>
              <h2>Titolo</h2>
            </header>
            


              Testo
            </p>
          </article>
        </div>
      </section>
    </div>
  </div>
  <footer>
    <div id="footer">
      

&copy; Copyright</p>
    </div>
  </footer>
</div>

e questo il css che uso

* {
	margin: 0;
	padding: 0;
}
html, body, #container, #wrapper, #content, #left, #right {
	height: 100%;
}
#container	 {
	width: 100%;
}
#wrapper {
	width: 1024px;
	margin: 0 auto 0 auto;
}
#content {
	min-width: 1024px;
}
#left {
	background: #000;
	opacity: 0.4;
	width: 40%;
	float: left;
}
#right {
	background: #000;
	opacity: 0.6;
	width: 60%;
	float: left;
}

#header {
	width: 310px;
	padding: 35px 0 0 0;
	background-color: white;
	position: absolute;
	top: 0;
	z-index: 1;
}

[Nobody33]

vorrei che le 2 colonne (#left e #right) arrivassero fino al footer occupando tutta la larghezza del container.

Con il tuo codice ottengo proprio ciò che dici. Qual è il problema?