HTML/CSS structure page Web

Question

Vous avez un petit problème avec cette structure du site: www.bigideaadv.com/xsp

Vous cherchez à avoir ce récipient remplir le milieu de l'écran entre le haut et la navigation en bas. J'aimerais aussi que le milieu s'effondre avec le redimensionnement de la fenêtre avec une barre de défilement. Je n'arrive pas à le faire fonctionner correctement. Quelqu'un a des pensées?

<div id="top_navigation"> 
     <div id="navigation_inside"> 
      <ul id="navigation"> 
       <li><a href="">Schedule Demo</a></li> 
       <li><a href="">Sales</a></li> 
       <li><p style="float:left; margin:0;">Search</p>&nbsp;&nbsp;<form style="margin:0 0 0 5px; padding:0; float:left;"><input class="search" type="text" /><input type="hidden"></form></li> 
      </ul> 
      <ul id="navigation2"> 
       <li><a href="">Home</a></li> 
       <li><a href="">About</a></li> 
       <li><a href="">Products</a></li> 
       <li><a href="">People</a></li> 
       <li><a href="">News + Events</a></li> 
       <li><a href="">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
    <div id="container"> 
     <div id="scroller"> 
     </div> 
    </div> 
    <div id="bottom_navigation"> 
     <div id="twitter_bar"> 
      <div id="twitter"> 
       <h5><img src="images/twitter_bird.png" width="23" height="16" />&nbsp;&nbsp;<b>@XSPGlobal:</b>&nbsp;</h5> 
       <p>Loading...</p> 
       <noscript><h5>This feature requires JavaScript</h5></noscript> 
      </div> 
     </div> 
     <div id="blog_posts"> 
      <p>Here is where the blog posts will go.</p> 
     </div> 
     <div id="bottom_navigation_inside"> 
      <ul> 
       <li><a href="">Partners</a></li> 
       <li><a href="">Interfaces</a></li> 
       <li><a href="">Careers</a></li> 
       <li><a href="">XACT Blog</a></li> 
       <li><a href="">Milestones</a></li> 
       <li><a href="">Awards + Recognition</a></li> 
       <li><a href="">Client Testimonials</a></li> 
       <li><a href="">Press Releases</a></li> 
       <li><a href="">Social Responsibility</a></li> 
       <li><a href="">Privacy Policy</a></li> 
       <li><a href="">Terms & Conditions</a></li> 
      </ul> 
     </div> 
     <div id="social_links"> 
      <a href="http://www.facebook.com"><img src="images/facebook.png" width="23" height="24" /></a> 
      <a href="http://www.twitter.com"><img src="images/twitter.png" width="23" height="24" /></a> 
      <a href="http://www.linkedin.com"><img src="images/linkedin.png" width="23" height="24" /></a> 
     </div> 
    </div> 

CSS:

#container { 
     margin: 72px 0 72px 0; 
     width: 100%; 
     height: 100%; 
    } 

    #top_navigation { 
     position: fixed; 
     min-width: 1010px; 
     width: 100%; 
     height: 72px; 
     background: url('../images/opaque.png') repeat; 
     text-transform: uppercase; 
    } 

    #bottom_navigation { 
     position: absolute; 
     min-width: 1010px; 
     width: 100%; 
     height: 172px; 
     background: url('../images/opaque.png') repeat; 
     text-transform: uppercase; 
    } 

Answer 1

mis le récipient à position fixe avec une partie supérieure de 72px et un fond de 172px.