液体 - 固定 - 液体布局答案

【问题标题】：Liquid - Fixed - Liquid Layout液体 - 固定 - 液体布局
【发布时间】：2011-06-12 19:13:49
【问题描述】：

我正在这个网站上工作：http://www.justaddsolutions.com/SampleSite/

主要区域的宽度为 1024 像素并且始终居中，这是实现的。但是，当浏览器窗口宽于 1024 像素时，我的客户希望黄色和红色条带延伸到浏览器窗口的相关边缘（左侧为黄色，右侧为红色）。

我想用基于 CSS 的 Liquid - Fixed - Liquid 布局来解决它，其中中心部分居中，侧面部分具有相等的液体宽度。但是我自己无法弄清楚，也无法在任何地方找到如何做到这一点。

我确实在 mathewjamestaylor 液体布局网站上找到了 Liquid-Fixed-Liquid Layout，但是当浏览器的窗口缩小到小尺寸时，它会在 IE8 中中断。

然后我想通过在标题中使用 3 列表并使用 background-image 和 repeat-x 设置 td 元素的样式来实现这一点，但这在 Chrome 和 Safari 中似乎效果不佳。

对于这个问题的任何帮助将不胜感激。

【问题讨论】：

标签： css layout liquid-layout

【解决方案1】：

刚刚测试过了，

http://www.antiyes.com/test/4753259/

看看 html，它现在看起来有点糟糕，因为颜色配置文件和图像的东西，它们必须被更好地切割，但这显示了该做什么的基础。

<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>

【讨论】：

哇...这太棒了！并以如此简单的方式完成。非常感谢。

【解决方案2】：

我相信你想多了。由于您对标题元素使用绝对定位，因此我将简单地为正文元素使用背景图像（不重复）。基本上，它会是一个类似于您当前徽标的图像，但颜色会从每一侧延伸。

由于它只是纯色，因此您可以将其设置为任意大的宽度（例如 9000 像素）以适应几乎任何浏览器尺寸，并且图像仍然相对较小。

【讨论】：

我以前也使用过同样的技术，虽然我没有达到 9000 像素宽。但是，是的，几千。 :)

【解决方案3】：

我提出的解决方案适用于高达 3072px 宽的分辨率，这应该足够了。

您需要为#body_background 制作一个宽 3072 像素、高约 140 像素的背景图像。这个的主要背景颜色显然是白色的。然后，您将在左侧部分制作一个 1024 像素宽的黄色条，从顶部向下开始 86 像素，以与主要部分中的黄色条对齐。然后，在黄色条在 1024 像素处结束的水平点，您将制作一个 2048 像素的红色条，该条在 32 像素的右边缘处与主要部分中的红色条对齐......所以基本上你会有一个看起来像这样的图像：

[ - - - - -1024px- - - - - - ]___________________________________________________
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

然后使用以下 CSS 将其作为背景图片添加到 #body_background：

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

应该这样做！让我知道它是否有效！

【讨论】：

非常感谢您的想法，mVChr。我已经尝试过 John Boker 之前发布的解决方案，它似乎工作得很好，所以我现在就这样做。不过，再次感谢。