Question

比如说：

<header>Hello</header>
<div role="main">Body</div>
<footer>&copy;</footer>

header {
    height:20px;
    background: #edf1f5;
}
div {
    background:#ddd;
    padding:20px;
}
footer {
    background: #e4e8ec;
}

如何让footer占用剩下的所有空间？我不打算在这里粘一个粘性页脚，我只是想让页脚填满这个空间。

这是一个Jsfiddle：http://jsfiddle.net/XF3E7/

Answer 1

我一直在努力解决这个问题。如果您使主体背景颜色与页脚相同，则会产生向下延伸到页面的幻觉。 http://jsfiddle.net/ollie/q3xzh/1/

header {
height:20px;
background: #edf1f5;
}
div {
background:#ddd;
padding:20px;
}
footer {
background: #e4e8ec;
}
body {background:#e4e8ec;}

Answer 2

我想你想要这样的东西？ http://jsfiddle.net/Ralt/XF3E7/5/

但是没有滚动嘿？没有javascript或使用表格是不可能的。

我确实建议使用背景颜色@Ollie说。

Answer 3

你只需要玩css

http://jsfiddle.net/XF3E7/10/

Answer 4

可悲的是，我能够回答我自己的问题：

http://jsfiddle.net/XF3E7/14/

使DIV占据所有较低的空间

4 个答案: