0

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

更新：这就是我所说的：

问题的演示

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

4

2 回答 2

2

我有一个解决方案，它有一些小的限制，但对于比 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;
}

在这种方法中，我声明display: table了 for#wrap-outer和display: table-cellfor #side-left、#content和#side-right。我可能已经使用了一些绝对定位的元素来达到类似的效果。

关键是分别将 和 的相对高度设置为10% #header、80% 和 10%。现实情况是，如果没有看到足够小的窗口大小的垂直滚动条，您就无法混合使用 % 和 px 的高度单位。我的妥协是为页眉和页脚设置一个值，并设计任何艺术品以具有一定的灵活性。如果垂直滚动出现在小屏幕上，则可以忍受。#wrap-outer#footermin-height

另外，请注意height: inheritfor#side-left和的使用#side-right。

使用多个背景图像

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

使用表格单元格

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

修复 IE7

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

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

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

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

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

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

于 2013-04-10T14:57:58.240 回答
-1

我不完全确定问题是什么，但这可能会对您有所帮助：

HTML / CSS，在每侧获得 2 个背景以使用包装器进行调整

于 2013-04-10T12:06:51.957 回答