扩展动态背景答案

【问题标题】：Expanding dynamic background扩展动态背景
【发布时间】：2012-09-28 20:42:53
【问题描述】：

我有一个居中的包装 div，其中包括一个标题、三个具有（基于 css 的）基于内容长度的动态高度的内容列，以及一个页脚。

现在我想要一个背景，将这些元素的颜色向左和向右扩展。

这是一个 js-fiddle 演示：http://jsfiddle.net/SLvYx/

所以我希望左上角为红色，左中角为黄色，左下角为绿色，依此类推。我的第一个解决方案是使用宽度为 2500 像素的背景 .png 作为正文，但这是在基于内容的列的动态高度被认为是必要的之后才实施的。

恐怕可能没有纯基于 html/css 的解决方案，但 JQuery 或 javascript 也是一种选择，虽然我只是脚本方面的初学者。也许我想开箱即用，也许我必须重做整个 html 结构来完成这个，但我不介意。 :-)

我几乎到处搜索，但在任何地方都找不到那个具体案例。

非常感谢您的帮助，因此在此先感谢所有对此进行调查的人。

编辑：我发现这篇文章：Dynamic table size html 这可能会有所帮助，也许这是一个解决方案，使用一个有 5 列的表格，第 1 列用于左侧背景，第 2-4 列用于内容，第 5 列用于正确的背景......这是强烈推荐的，还是我应该把桌子放在外面？

这是我演示的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />  <title>Test</title>
<style type="text/css">
body {margin:0;}
#wrapper {margin: 0px auto; width: 940px;}
#header {background:red; height:100px;}
#content_wrapper {width: 940px; padding: 0px 0px 0px 0px; background: #CCC; overflow: hidden;}
#leftcolumn {background:yellow; width: 470px; float:left; height:auto; min-height: 680px;}
#middlecolumn {background:goldenrod; width: 235px; float:left; height:100%; margin-bottom: -1000px; padding-bottom: 1000px;}
#rightcolumn {background:darkgoldenrod ; width: 235px; float:left; height:100%;margin-bottom: -1000px; padding-bottom: 1000px;}
#footer {background:lightgreen; height:100px;}
</style>
</head> 
<body>

<div id="wrapper">

    <div id="header">
        Header
    </div>

        <div id="content_wrapper">        

            <div id="leftcolumn">
                Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />
            </div>

            <div id="middlecolumn">
                Middle Column
            </div>

            <div id="rightcolumn">
                Right Column
            </div>

        </div>    

    <div id="footer">
        Footer
    </div>

</div>    

</body>
</html>

【问题讨论】：

标签： html css dynamic

【解决方案1】：

不，您不需要 javascript 或表格。常规 ol'（基于 div）的 HTML 和 CSS 可以解决问题。

您需要做的是稍微重构您的页面。不要依赖包装器 div，而是堆叠三个主要部分，然后在每个部分中添加一个内部 div，它是您想要的宽度。查看更新后的JSFiddle。

我在每个部分中添加了一个（当然是非语义的）div，其类为“inner”，它获得了您所追求的 940 宽度。

现在唯一的技巧是中间部分。您要做的是创建一个非常宽、短的图像。比如说，3000px 宽 x 1px 高。将其拆分为 50/50，使左侧为黄色，右侧为暗金棒。如果您使用该图像作为 content_wrapper 的背景，并将其垂直平铺，则会产生颜色从侧面延伸的错觉。这适用于大多数浏览器。

如果您不关心旧浏览器，您甚至可以更进一步，在 content_wrapper 的背景上使用 CSS 渐变。 See this even further updated Fiddle.

渐变在 IE9 或更低版本中不起作用 - 但没关系，因为图像在样式表中作为后备。

【讨论】：

是的，“内部” div 做到了，太好了，非常感谢！所以，其实我在盒子里面想的太少了，呵呵。今天我已经用一张桌子进行了测试，它也可以工作，但是这个解决方案使 html 更加清晰，即使使用非语义的内部 div 也是如此。但是谁在乎语义，如果它最终能完美运行:-) 再次感谢！！！