jquery - 带有网格图 block 的网页的流体设计

Question

我想为网页创建网格布局。它应该由九个完全适合当前浏览器窗口视口(viewport)的单元格组成。中心单元格应具有固定的宽度和高度，并且水平和垂直居中。所有其他单元格都会动态调整以适应实际的浏览器窗口大小。

我更喜欢纯 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'
        });
    }
});