三列布局：固定宽度中心与流体侧列答案

【问题标题】：Three column layout: fixed width center with fluid side columns三列布局：固定宽度中心与流体侧列
【发布时间】：2012-01-07 04:00:55
【问题描述】：

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

目的是有一个固定尺寸的中心区域，背景复杂将填充任何大小的浏览器窗口的模式。

我想不出我会如何做到这一点。 margin:auto 似乎不会足以满足我的背景要求，我认为我无法添加侧柱的大型固定支柱，而不会失去我的中心。

Here's a rough mockup of the layout.

【问题讨论】：

标签： html css layout

【解决方案1】：

根据您的screenshot，您可以这样写：

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

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

更新：

根据你的问题解决Three column layout: fixed width center with fluid side columns

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

但它在现代浏览器中有效

更新

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

它适用于所有浏览器

【讨论】：

该技术不起作用，因为平铺背景上有一个不透明蒙版。蒙版的中心是具有不同不透明度的固定图像，而边缘具有统一的不透明度并且必须流畅地调整大小。
谢谢，这就是我正在寻找的布局。我更喜欢使用没有特定于供应商的扩展的基本 CSS，但如果我找不到更好的东西，这会有所帮助。我认为添加带有隐藏溢出的支撑页脚以使背景也垂直填充窗口应该不是很困难。
谢谢桑迪普。这效果更好，但我注意到右边有一个小的边距。此外，如果侧栏中没有文本，则无法正确呈现。我认为我的解决方案会很好，但我会接受你的回答，因为你花时间给出了答案。

【解决方案2】：

用这个 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;
 }

Demo of above techniques

【讨论】：

小心使用:before 作为it won't work in IE7 or below。
这是一个有趣的技术，尤其是使用伪元素，但我需要将椭圆形蒙版固定在中心，而侧面和底部将是流动的并使用固定的不透明度蒙版

【解决方案3】：

有几个博客讨论过这个问题，包括Perfect Multi-Column CSS Liquid Layouts。我敢肯定，如果您通读它（这真的很有趣），您将能够对其进行调整以满足您的需求，如果它还没有这样做的话。

【讨论】：

您的链接似乎只讨论了完全流畅的布局。我正在寻找带有液体侧柱的固定中心。我不只是在寻找剪切和粘贴代码；我确实想更好地理解模型。不幸的是，CSS 很难掌握，尤其是因为似乎总是有浏览器错误需要解决。

【解决方案4】：

你能处理这样的事情吗？如果您认为这是您正在寻找的内容，我可以进一步解释。

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

【讨论】：

这将与此类似，但列需要扩展而不是中心边距扩展。这是因为侧栏充当背景图案的遮罩。

【解决方案5】：

我已经找到了一个使用绝对定位的解决方案。我感谢任何 cmets。

http://jsfiddle.net/tupCS/12/

我尝试使用浮点数和负边距，但背景重叠，这是行不通的，因为我需要将它用于背景蒙版，并且重叠会导致蒙版之间流血。

我的解决方案还将背景列分隔到它们自己的 div 中。然后我可以隐藏这个 div 的溢出而不隐藏它的内容。这允许滚动条仅在窗口小于内容时出现。

【讨论】：