Бестабличное расположение с двумя жидкостными колоннами (жидкость - фиксированная - жидкость) - PullRequest
Новая
       12

Бестабличное расположение с двумя жидкостными колоннами (жидкость - фиксированная - жидкость)

0 голосов
/ 17 мая 2011

Итак, это веб-приложение, в котором я работаю, имеет три вертикальных столбца, расширяющихся на всю высоту окна, и нижний колонтитул div, расширяющихся на всю ширину.Макет выглядит следующим образом: 

+|+
---

, где + означает столбец жидкости, | означает фиксированный столбец, а - нижний колонтитул.позиционирование элементов с использованием абсолютного и относительного позиционирования с некоторыми настройками с использованием jQuery.Но я хочу знать, есть ли способ сделать это только с помощью CSS3.

Спасибо!

1 Ответ

2 голосов
/ 17 мая 2011

Это игнорирует все браузеры, не поддерживающие свойства box-orient и box-flex (например, IE).

Демо : http://jsfiddle.net/p8vBC/11/

CSS : 

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body > #main {
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;

    height: 100%;
    margin-bottom: -100px;
}

footer {
    height: 100px;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

aside {
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

#content {
    width: 400px;
}

HTML 

<div id="main">
    <aside id="left"></aside>
    <div id="content"></div>
    <aside id="right"></aside>
</div>

<footer></footer>
...