footer sempre in basso con tendine estendibili

[Ashry]

Ciao a tutti avrei bisogno di un aiuto per modificere il mio css in modo da far si che il footer si sposti on basso quando faccio comparire dei contenuti.
Mi spiego meglio, in una pagina ho 3 div nascosti (display:none) che vengono visualizzati al click su un pulsante tramite js. il problema è che quando faccio "comparire i box di testo" il footer non si sposta

javascript:

function Show_Stuff(Click_Menu,Click_bt1,Click_bt2) {
    if (Click_Menu.style.display == "none") {
        Click_Menu.style.display = "block";
    } else {
        Click_Menu.style.display = "none";
    }
    if (Click_bt1.style.display == "none") {
        Click_bt1.style.display = "block";
    } else {
        Click_bt1.style.display = "none";
    }
    if (Click_bt2.style.display == "none") {
        Click_bt2.style.display = "block";
    } else {
        Click_bt2.style.display = "none";
    }
} 

CSS:

html,body{margin: 0;padding:0;height:100%;}
body,td,th {
    font-family:Arial, Helvetica, sans-serif;
    font-size:69%;
    color: #333333;
    letter-spacing: 0px;
}
body {
    background-color:#394c61;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

div#container{    position:absolute;
        left:50%;
        height: 100%;
        margin:0 0 0 -367px;
        width:732px;
        color:#333333;
        background-color:#c7c5c6;
        clear:both;
        }

body>div#container{height:auto;min-height:100%;}

#top{ text-align:right; 
    width:732px;
    height:209px;
    border:0px;
    }

#prodotti{ clear:both;}

.leftProdotti{
        display:block;
        width:254px;
        float:left;
        margin-top:30px;
        margin-bottom:30px;
        margin-left:40px;
        display:block;
        text-align:justify;
}

.rightProdotti{
        display:block;
        width:360px;
        float:left;
        margin-top:30px;
        margin-bottom:30px;
        margin-left:40px;
        display:block;
        text-align:justify;
}
.clear{ clear:both; 
        display:block; 
        height:10px; 
        font-size:3px;}
#separatore{ clear:both; 
        display:block; 
        height:10px; 
        font-size:3px;} 

HTML:

<div id="container">
  <div id="top"></div>
  <div id="linkList">
    <ul>
      <li class="li">MENU[/list]
  </div>
  <div id="prodotti">
    <div class="leftProdotti"> titolo </div>
    <div class="rightProdotti">
      <h2>details</h2>
      [url="javascript:Show_Stuff(display1,pullA,pullB)"][img]../_images/open01.jpg[/img][img]../_images/close01.jpg[/img][/url]
      <div id="display1" style="display: none">
        

box testo</p>
      </div>
    </div>
    <span class="clear"></span> </div>
  <div id="separatore"></div>
  <div id="footer">Footer</div>
</div> 

il doctype è transitional

Grazie
Ciao