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

Question

因此，我正在使用的这个 Web 应用程序具有三个垂直列，扩展为整个窗口高度，以及一个div扩展为整个宽度的页脚。布局如下所示：

+|+
---

其中+表示液柱，|表示固定柱，以及-页脚。

我已经使用绝对和相对定位完成了元素定位，并使用 jQuery 进行了一些调整。但我想知道是否有办法只用 CSS3 做到这一点。

谢谢！

Answer 1

这忽略了所有不支持box-orientandbox-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>