Жидкий дизайн для веб-страницы с сеткой - PullRequest
Новая
       38

Жидкий дизайн для веб-страницы с сеткой

0 голосов
/ 04 декабря 2011

Я хочу создать сетку для веб-страницы. Он должен состоять из девяти ячеек, которые точно соответствуют текущему окну просмотра браузера. Центральная ячейка должна иметь фиксированную ширину и высоту и центрироваться по горизонтали и вертикали. Все остальные ячейки динамически настраиваются в соответствии с фактическим размером окна браузера.

Я бы предпочел решение только для CSS, возможно, CSS-каркас с открытым исходным кодом. JQuery тоже хорошо.

1 Ответ

1 голос
/ 04 декабря 2011

Хорошо, получил сам: 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'
        });
    }
});
...