Question

简而言之

我需要一个符合以下要求的CSS解决方案：

两个垂直重复的背景图像，一个与左侧对齐，一个与右侧对齐
顶部有一个中心柱，固定宽度，最小高度为100％
跨浏览器兼容性

更多细节

今天我的当前网站项目的新要求出现了：左侧和右侧有渐变的背景图像（替换当前的身体背景图像）。现在的挑战是指定两个不同的背景图像，同时保留其余的布局规范。不幸的是，（简单）布局在某种程度上不符合两种背景。

我的布局基本上是一个固定宽度的中心列：

#main_container {
    background-color: white;
    margin: 0 auto;
    min-height: 100%;
    width: 800px;
}

此外，有必要将色谱柱拉伸至最小高度100％，因为有一些页面只有很少的内容。以下CSS样式负责：

html {
    height: 100%;
}

body {
    background-image: url('old-background.png');
    margin: 0;
    height: 100%;
    padding: 0;
}

到目前为止一直很好 - 直到带有渐变的新身体背景图像到达。我尝试了以下解决方案

主容器后面有两个绝对定位的div
使用正文定义的一个图像，一个使用html CSS类
一个用身体定义的图像，另一个带有大div的图像用于主容器

对于其中任何一个，动态高度解决方案都被破坏了。当主容器太小时，主容器没有伸展到100％，或者当内容实际上更长时背景保持在100％

Answer 1

修改：

<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

使用css：

html {
  height: 100%;
}
body {
  background: url(left.png) repeat-y top left;
  background-attachment:fixed;
  height: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  background: url(right.png) repeat-y top right;
  height: 100%;
  width: 100%;
  position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
  height: 100%;
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

修改

此版本适用于支持position:fixed（不是ie6）的浏览器。

示例页面：http://jsbin.com/ebozi3/4/edit

Answer 2

<强> [改造]

我很傻。非常。
问题：body需要有bg图片，#main_container需要有800宽度且位于中心。
（糟糕的方法：我正在使用bg图像进行#main_container，而不是居中，800px。）

新方法：我建议在新div内body内span和div：

<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

然后：

body {
  background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
  background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
  text-align: center;
}
body>div>span {
  display: inline-block;
  /* IE only likes this rule on elements that are inline by nature, thus the use of span.
  I'm not sure 100% height will work on #main_container. */
}

和你的常规规则：

#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}

Answer 3

使用“布局表”，我的问题可以解决。但是，纯CSS解决方案将是首选！

这是一个基于工作表的解决方案：

table.layout {
  border-collapse: collapse;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.layout td {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

td.layout_left {
  background-image: url('background-left.png');
  background-position: top left;
  background-repeat: repeat-y;
}

td.layout_center {
  background-color: white;
  width: 800px;
}

td.layout_right {
  background-image: url('background-right.png');
  background-position: top right;
  background-repeat: repeat-y;
}

HTML代码：

<table class="layout">
  <tr>
    <td class="layout_left">&nbsp;</td>
    <td class="layout_center">
      <!-- content -->
    </td>
    <td class="layout_right">&nbsp;</td>
  </tr>
</table>

CSS挑战：两个背景图像，中心列固定，最小高度100％

3 个答案: