jquery - グリッドタイルを使用したWebページの流動的なデザイン

Question

Webページのグリッドレイアウトを作成したい。現在のブラウザウィンドウのビューポートに正確に収まる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'
        });
    }
});