具有两个液体柱的无表布局（液体 - 固定 - 液体）

Question

因此，我正在使用的这个 Web 应用程序具有三个垂直列，扩展了整个窗口高度，一个页脚 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>