html - 带有两个液柱(液体-固定-液体)的无桌面布局

因此，我正在使用的此Web应用程序具有三个垂直列，它们在整个窗口高度上扩展，而页脚div在整个宽度上都扩展。布局如下所示：

+|+
---

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

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

谢谢！

最佳答案

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

关于html - 带有两个液柱(液体-固定-液体)的无桌面布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6033498/