html - 当内容很少时获取整页 div 列以适合页面内部

Question

我在 html 布局方面遇到了一些问题。
基本思路是在页眉和页脚之间有 3 列。
中间的柱子是固定的，两边都是剩下的。 双方必须有不同的图像背景。 你可以在这里明白我的意思 -> http://assets.nbn-studio.com/3cols.html .
问题是内容有时比窗口小，但由于我将列设置为 100%，页脚始终位于页面底部下方。 我尝试了不同的方法，但似乎都做不好。
不要介意这些图像，但我必须表现出一些意义。此外，所有这些都必须在 IE7 及更高版本中工作。
此外，两侧将没有内容，只有背景图像。 如果有任何想法，我将不胜感激。

更新: 这就是我要说的:

图片链接:http://i49.tinypic.com/1zeju2t.jpg

Answer 1

我有一个解决方案，它有一些小的限制，但对于比 IE6/7 更新的浏览器来说工作得相当好。

您可以在以下位置查看工作页面:http://jsfiddle.net/audetwebdesign/6jnWE/show/

并查看代码和 CSS:http://jsfiddle.net/audetwebdesign/6jnWE

CSS 看起来像:

* {
    margin: 0;
    padding: 0;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#header {
    background: url(http://assets.nbn-studio.com/apache_pb.gif) #CC0;
    height: 10%;
    min-height: 50px;
    width: 100%;
}
#wrap-outer {
    width: 100%;
    height: 80%;
    display: table;
}
#side-left {
    display: table-cell;
    vertical-align: top;
    background: url(http://assets.nbn-studio.com/arrow-left-2.png) right top repeat;
    height: inherit;
}
#left-content {
    float: right;
    background: url(http://assets.nbn-studio.com/arrow-left.png) repeat-y;
    width: 150px;
    height: 100%;
}
#content {
    display: table-cell;
    vertical-align: top;
    width: 800px;
    background: url(http://assets.nbn-studio.com/knot.png) repeat;
}
#side-right {
    display: table-cell;
    vertical-align: top;
    background: url(http://assets.nbn-studio.com/arrow-right-2.png) left top repeat;
    height: inherit;
}
#right-content {
    float: left;
    background: url(http://assets.nbn-studio.com/arrow-right.png) repeat-y;
    width: 150px;
    height: 100%;
}
#footer {
    background: #6C9;
    height: 10%;
    min-height: 50px;
    width: 100%;
    clear: both;
}

在这种方法中，我为 #wrap-outer 声明了 display: table ，为 #side 声明了 display: table-cell -left、#content 和 #side-right。我本可以使用一些绝对定位的元素来实现类似的效果。

但关键是将#header、#wrap-outer 和#footer 的相对高度设置为10%、80% 和分别为 10%。现实情况是，您不能混合使用 % 和 px 的高度单位，而不会看到足够小的窗口大小的垂直滚动条。我的妥协是为页眉和页脚设置一个 min-height 值，并设计任何具有一定灵 active 的图稿。如果垂直滚动出现在小屏幕上，则可以接受。

另外，请注意 height: inherit 用于 #side-left 和 #side-right。

使用多个背景图片

如果您专注于支持 CSS3 的较新浏览器，您可以通过在 #wrap-outer 中使用多个图像来简化标记，并在 #side-left 中一起消除背景图像 和 #left-content 元素(右侧类似)。

表格单元格的使用

IE6/7 不支持 table-cell 属性，这对某些用户来说可能是个问题。

针对 IE7 的修复

我想出了一个不使用 table-cell 的替代布局。

您可以在以下位置查看:http://jsfiddle.net/audetwebdesign/c7vTL/

我使用 position: absolute 定位侧面板。

我做了一些修改以允许这个版本工作:

1. 中央背景图像固定到包装而不是内容元素。这需要为侧边栏设置背景颜色(白色)。

2. 隐藏包装器上的溢出。