html - 2つの液体カラムを備えたテーブルレスレイアウト（液体-固定-液体）

Question

したがって、私が作業しているこのWebアプリケーションには、ウィンドウの高さ全体に拡張する3つの垂直列と、div幅全体に拡張するフッターがあります。レイアウトは次のようになります。

+|+
---

ここで+、は液体カラム、|は固定カラム、および-フッターを意味します。

jQueryを使用していくつかの調整を行い、絶対配置と相対配置を使用して要素の配置を行いました。しかし、CSS3だけでこれを行う方法があるかどうか知りたいです。

ありがとう！

Answer 1

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>