帶網格瓦片的網頁的流體設計

Question

我想爲網頁創建網格佈局。它應該由9個單元格組成，它們完全適合當前的瀏覽器窗口視口。中心單元應具有固定的寬度和高度並且水平和垂直居中。所有其他單元格都會動態調整以適應實際的瀏覽器窗口大小。

我寧願只使用CSS解決方案，也許是一個開源的CSS網格框架。不過，jQuery也很好。

Answer 1

好，我知道自己：http://jsfiddle.net/alp82/TR6EY/

HTML：

<div id="container"> 
    <div id="top"> 
     <div id="top-left"> 
      <h1>TOP LEFT</h1> 
     </div> 
     <div id="top-center"> 
      <h1>TOP CENTER</h1> 
     </div> 
     <div id="top-right"> 
      <h1>TOP RIGHT</h1> 
     </div> 
    </div> 
    <div id="middle"> 
     <div id="mid-left"> 
      <h1>MID LEFT</h1> 
     </div> 
     <div id="center"> 
      <h1>CENTER</h1> 
     </div> 
     <div id="mid-right"> 
      <h1>MID RIGHT</h1> 
     </div> 
    </div> 
    <div id="bottom"> 
     <div id="bot-left"> 
      <h1>BOTTOM LEFT</h1> 
     </div> 
     <div id="bot-center"> 
      <h1>BOTTOM CENTER</h1> 
     </div> 
     <div id="bot-right"> 
      <h1>BOTTOM RIGHT</h1> 
     </div> 
    </div> 
</div> 

CSS：

html, body { 
    margin: 0px; 
} 

#container { 
    display: table; 
    width: 100%; 
} 

#container > div { 
    display: table-row; 
} 

#container > div > div { 
    display: table-cell; 
    vertical-align: middle; 
} 

#center { 
    width: 300px; 
    height: 200px; 
} 

h1 { 
    text-align: center; 
} 

JS：

$(document).ready(function() { 
    calculateHeights(); 

    $(window).bind('load resize orientationchange', function() { 
     calculateHeights(); 
    }); 

    function calculateHeights() { 
     $('#top, #top > div, #bottom, #bottom > div').css({ 
      'height' : (($(window).height() - $('#center').height())/2) + 'px', 
      'min-height' : (($(window).height() - $('#center').height())/2) + 'px' 
     }); 
    } 
});