HTML/CSS网页结构

Question

有一个小问题，与本网站结构：www.bigideaadv.com/xsp

希望有这个容器填补顶部和底部之间的导航屏幕的中间。我还想用滚动条调整窗口的大小来中间崩溃。似乎无法使其工作非常正确。任何人有任何想法？

<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

设置容器至位置固定72px的顶部和172px底部。