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>

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

1 个答案: