带两个液柱（液体

带两个液柱（液体 - 固定 - 液体）的无表布局(Tableless layout with two liquid columns (liquid - fixed - liquid))

因此，我正在使用的这个Web应用程序有三个垂直列，扩展了整个窗口高度，并且一个页脚div扩展了整个宽度。 布局看起来像这样：

+|+ ---

其中+表示液柱， | 意味着一个固定的列，并且-页脚。

我已经完成了使用绝对和相对定位以及使用jQuery进行一些调整的元素定位。 但是我想知道是否有只用CSS做这个的方法。

谢谢！

So, this web application I'm working in haves three vertical columns expanding for the entire window height, and a footer div expanding for the entire width. The layout looks like this:

+|+ ---

where + means a liquid column, | means a fixed column, and - the footer.

I've done the element positioning using absolute and relative positioning with some tweaks using jQuery. But I want to know if there is a way of doing this with CSS only.

Thanks!

最满意答案

这忽略了所有不支持box-orient和box-flex属性的浏览器（如IE）。

演示 ： http : ///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>

This neglects all browser not supporting the box-orient and box-flex properties (like IE).

Demo: http:///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>