Question

我现在一直在努力解决这个问题。我想要的是：

窗口高度的100％，宽度的50％，左边= 0％，红色
窗口高度的100％，宽度的50％，左边= 50％，绿色
窗口高度的100％，宽800像素，水平居中，蓝色

所以前两个div形成一个双色背景，第三个div（包含所有页面内容）居中。我几乎让它使用这两个background-div：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="background-color:black">
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: red"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: green"></div>
</body>
</html>

然而，它不适用于FF3。至于我可以告诉z-order的组合：-1和position：absolute会导致div在后面渲染到body元素（很奇怪，但这就是Firebug显示的内容）。

谁能告诉我如何实现这一目标？没有JavaScript允许。我想一个选项是将身体背景设置为红色，然后只需要一个额外的div作为绿色部分，但我不确定它有帮助吗？

编辑： SO未显示我的DOCTYPE标记。建议不适用于。

Answer 1

不使用z顺序和绝对定位使事情复杂化，请尝试以下

使用任何基本图形编辑器制作2000 x 1像素图像，使左半部分为红色，右半部分为绿色。将图像保存为bg_tile.jpg并使用以下标记

HTML：

<body>
    <div id="wrapper">
    </div>
</body>

CSS：

body {
  width: 100%;
  height: 100%;
  background-image: url(images/bg_tile.jpg);
  background-position: 50% 0;
  background-repeat: repeat-y;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
  height: 100%;
  background-color: #0000FF;
}

Answer 2

我认为这就是你要找的东西：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="padding:0; margin:0;">

  <div style="position:absolute; width:50%; height:100%; top:0; left:0; background-color:red"></div>
  <div style="position:absolute; width:50%; height:100%; top:0; left:50%; background-color:green"></div>


  <div style="position:absolute; height:100%; width:800px; margin-left:-400px; top:0; left:50%; background-color:blue">

<!-- Content goes here -->

  </div>
</body>
</html>

这适用于Firefox 3.6。蓝色框居中，页面内容可以进入其中。

更新：以下是适用于!DOCTYPE字符串的更新版本。我再次测试了这个Firefox 3.6。如果这对您有用，请告诉我。

Answer 3

您可以通过将身体设置为z-order:-2来将其推回来进行补偿。

％和px <div>大小的混合</div>

3 个答案: