Html CSS挑战：两个背景图像，中间列固定，最小高度100%_Html_Css_Background_Height

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

html css

Html CSS挑战：两个背景图像，中间列固定，最小高度100%,html,css,background,height,Html,Css,Background,Height,简而言之我需要一个CSS解决方案来满足以下要求：两个垂直重复的背景图像，一个左对齐，一个右对齐顶部有一个中心柱，固定宽度，最小高度为100% 跨浏览器兼容性更多细节今天，我当前的网站项目提出了一个新的要求：在左侧和右侧具有渐变的背景图像（替换当前的身体背景图像）。现在的挑战是在保留布局规范的其余部分的同时指定两个不同的背景图像。不幸的是，（简单的）布局与这两个背景不匹配我的布局基本上是一个固定宽度的中心列： #主容器{ 背景色：白色；保证金：0自动；最小高度：100%；宽度

简而言之

我需要一个CSS解决方案来满足以下要求：

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

更多细节

今天，我当前的网站项目提出了一个新的要求：在左侧和右侧具有渐变的背景图像（替换当前的身体背景图像）。现在的挑战是在保留布局规范的其余部分的同时指定两个不同的背景图像。不幸的是，（简单的）布局与这两个背景不匹配

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

#主容器{
背景色：白色；
保证金：0自动；
最小高度：100%；
宽度：800px；
}

此外，有必要将列的最小高度扩展到100%，因为有相当多的页面内容很少。以下CSS样式可以解决这一问题：

html{
身高：100%；
}
身体{
背景图片：url（'old-background.png'）；
保证金：0；
身高：100%；
填充：0；
}

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

主容器后面的两个绝对定位的div

一个是用主体定义的图像，一个是用html CSS类定义的图像

一个用主体定义的图像，另一个用大div定义主容器

其中任何一个都破坏了动态高度解。主容器太小时没有拉伸到100%，或者内容实际上更长时背景保持在100%

[Reform]

我很傻。非常。
问题：

主体

需要有背景图像，

主容器

需要有800宽且在中间。
（糟糕的方法：我用bg图像做

#主容器

，不居中，800px。）

新方法：我建议在

主体内设置div
，在新div
内设置span
：
<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

你的规则是：
#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}

使用“布局表”，可以解决我的问题。不过，最好是一个纯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>


已修改：
<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

编辑：
此版本适用于支持位置：固定的（非ie6）的浏览器
示例页面：
背景图像有多宽？Pekka，看起来你删除了第一条评论。我的意思是你第一次理解的：后面有两个背景图片，顶部有一个中间的列，背景是纯白的。所以，我想你的第一个表格解决方案是可行的。但是，关于背景图像的宽度：我实际上可以根据需要使它们变宽。最重要的是左端和右端的渐变，这是双图像要求的实际原因。两个背景图像应位于#main_容器后面。#main_容器本身具有纯白背景。我认为我的问题的第一个版本不够准确，对此我深表歉意。我现在重新措辞了。对不起，我不明白。如果你说#main_容器
内部有纯白背景，你无法更改，那么当然任何父容器上都不会显示背景。想更具体一点吗？我会把我的答案修改得更清楚。我读错了。。。修改了答案以实际解决您的问题。抱歉搞砸了。
选择器在ie6中不起作用。为了安全起见，只需使用一个类。非常感谢您的输入！恐怕100%的最低高度不适用于主容器……嗨，乔尔，谢谢你的回答。您的解决方案的问题是div.container高度。即使有更多内容，容器仍保持100%。+1@laurent:删除高度：100%div.container
的code>应该可以使其按您的需要工作。删除高度或用最小高度替换它可以使内容超过100%。但当内容小于100%时，白色列不会拉伸。
<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

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;
}