Question

我有一个居中的包装器div，它包含一个标题，三个内容列，基于内容长度（基于css）动态高度和页脚。

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

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

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

我担心可能没有纯粹的基于html / css的解决方案，但JQuery或javascript也是一个选项，虽然我只是一个关于脚本的初学者。也许我认为开箱即用，也许我必须重做整个html结构来完成这个，但我不介意。： - ）

我几乎到处搜索，但无法在任何地方找到具体案例。

非常感谢帮助，所以感谢所有关注此事的人。

编辑：我发现这篇帖子：Dynamic table size html可以帮助，也许这是一个解决方案，使用一个包含5列的表，第一个用于左侧背景，第二个用于内容，第五个用于第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>

Answer 1

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

您需要做的是稍微重新调整页面。不是依赖于包装器div，而是堆叠三个主要部分，然后在每个部分中都有一个内部div，它是您想要的宽度。请参阅更新的JSFiddle。

我在每个部分添加了一个（不可否认的非语义）div，类为“inner”，它获得了你所追求的940宽度。

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

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

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

扩大动态背景

1 个答案: