三列布局：固定宽度中心与流式侧边栏

Question

我正在尝试使用CSS实现一个设计，该设计在body上具有平铺背景。我想在内容背景中使用png图像作为椭圆形不透明蒙版覆盖在body背景上。侧边栏（和带有裁剪溢出的支撑页脚）将具有部分透明的黑色背景，与.png掩码的边缘相匹配。

意图是拥有一个固定维度的中心区域，具有复杂的背景图案，可以填充任何大小的浏览器窗口。

我想不出如何完成这个任务。margin:auto似乎不能满足我的背景要求，而且我认为我不能添加一个大的固定属性到侧栏，否则就会失去我的居中效果。

这里是布局的初步模型：链接。

- Kylos

Answer 1

根据您的截图，您可以这样写：

body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

更新：

根据你的问题“三列布局：固定中间宽度，流式侧栏”，以下是解决方案：

http://jsfiddle.net/XMg2h/3/

但只适用于现代浏览器。

更新：

http://jsfiddle.net/XMg2h/10/

适用于所有浏览器。

- sandeep

---

那种技术行不通，因为平铺背景上有不透明的遮罩。遮罩的中心是一个固定图像，透明度不断变化，而边缘具有统一的不透明度并且必须流畅地调整大小。 - Kylos

谢谢，这是我想要的布局。我更喜欢使用基本的CSS而不是特定于供应商的扩展，但如果找不到更好的，这也会有所帮助。我认为添加一个具有隐藏溢出的支撑页脚以使背景垂直填充窗口并不难。 - Kylos

感谢Sandeep。这样做效果更好了，但我注意到右侧有一个小边距。此外，如果侧栏中没有文字，它将无法正确呈现。我认为我的解决方案很好，但既然你花时间给出了答案，我会接受你的答案。 - Kylos

Answer 2

我使用绝对定位找到了解决方案。欢迎任何评论。 http://jsfiddle.net/tupCS/12/ 我尝试使用浮动和负边距，但背景重叠了，这不可行，因为我需要它来进行背景遮罩，重叠会导致遮罩之间出现漏洞。

我的解决方案还将背景列分成了自己的div。然后我可以隐藏此div的溢出，而不隐藏内容的溢出。这样只有在窗口小于内容时才会出现滚动条。

- Kylos

Answer 3

有几个博客讨论了这个问题，包括完美的多列CSS液态布局。如果你仔细阅读它（它真的很有趣），你就能够适应它来满足你的需求，如果它还没有做到。

- JesseBuesking

---

您提供的链接似乎只讨论了完全流体布局。我正在寻找一个固定中心和液态侧栏的布局。我不仅仅是要复制粘贴代码；我确实想更好地理解这个模型。不幸的是，CSS 可能很难掌握，特别是因为总是有浏览器错误需要解决。 - Kylos

Answer 4

你能够使用类似这样的东西吗？如果你认为这是你想要的，我可以进一步解释。

http://jsfiddle.net/Wexcode/Atjtt/

- Wex

---

这个与那个类似，但是列需要扩展而不是中间边距扩展。这是因为侧边栏充当了背景图案的遮罩。 - Kylos

Answer 5

使用以下CSS平铺背景图像：

 body{
      background:url(wallpaper.png);
 }

将“椭圆阴影”制作成半透明的.png格式，并将其切成四个部分。使用绝对定位的伪元素将这些部分附加到文档的四个角落。

 body:before{
      content:''; 
      display:block; 
      background:url(oval-shadow-top-left:.png);
      position:absolute; 
      top:0; left:0; 
      height:300px; width:400px;
} 

对于每个角落都要这样做（您可以使用任何元素的伪元素，只要它不是相对定位的）。

将 div 居中，并给它一个 z-index 以确保它位于伪元素之上。

 div{
      width:300px; height:200px; 
      margin: 50% auto; 
      position:relative; 
      z-index:100;
      top:-150px;
 }

以上技术的演示

- bookcasey

---

使用 :before 时要小心，因为它在 IE7 或以下版本中无法正常工作。 - Wex

这是一种有趣的技术，特别是使用伪元素，但我需要椭圆形遮罩固定在中心，而侧面和底部将是流体的，并使用固定不透明度遮罩。 - Kylos