我有一个居中的包装 div，它包括一个标题、三个内容列(基于 css)动态高度基于内容长度和一个页脚。
现在我想要一个背景，将这些元素的颜色向左和向右扩展。
这是一个 js-fiddle 演示:http://jsfiddle.net/SLvYx/
所以我希望左上角是红色的，左中 Angular 是黄色的，左下角是绿色的，等等。 我的第一个解决方案是为正文使用宽度为 2500px 的背景 .png，但那是在基于内容的列动态高度被认为是必要的之后实现之前。
恐怕可能没有纯基于 html/css 的解决方案，但 JQuery 或 javascript 也是一种选择，尽管我只是脚本编写的初学者。 也许我想开箱即用，也许我必须重做整个 html 结构才能完成此操作，但我不介意。 :-)
我几乎到处搜索，但在任何地方都找不到那个具体案例。
非常感谢您的帮助，因此提前感谢所有关注此问题的人。
编辑:我发现这篇文章:Dynamic table size html这可能会有所帮助，也许这是一个解决方案，使用一个包含 5 列的表格，第 1 列用于左侧背景，第 2-4 列用于内容，第 5 列用于右侧背景......这是热烈推荐的，还是我应该把 table 放在外面？
这里是我的演示的完整代码:
<!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>
最佳答案
不，您不需要 javascript 或表格。常规的 ol'(基于 div)HTML 和 CSS 就可以了。
您需要做的是稍微重组您的页面。不要依赖包装器 div，而是堆叠三个主要部分，然后在每个部分中有一个内部 div，这是你想要的宽度。查看更新的 JSFiddle .
我在每个部分中添加了一个(诚然是非语义的)div 类“inner”，它获得了您想要的 940 宽度。
现在唯一的技巧是中间部分。你想要做的是创建一个非常宽、短的图像。比如，3000 像素宽乘以 1 像素高。将它分成 50/50，这样左边是黄色的，右边是暗金棒。如果您将该图像用作 content_wrapper 的背景，并使其垂直平铺，则会产生颜色从侧面延伸的错觉。这适用于大多数浏览器。
如果您不关心旧版浏览器，您甚至可以更进一步，在 content_wrapper 的背景上使用 CSS 渐变。 See this even further updated Fiddle .
渐变在 IE9 或更低版本中不起作用 - 但没关系，因为图像在样式表中作为后备。
关于html - 展开动态背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12620912/