扩展动态背景

我有一个居中的包装div包括一个标题，三个内容列（基于内容长度（基于CSS）的动态高度和一个页脚。扩展动态背景

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

这里是一个JS-小提琴演示：http://jsfiddle.net/SLvYx/

所以我想在左上角为红色，左侧中央的是黄色的，左下角是绿色的，等等。我的第一个解决方案是使用宽度为2500px的背景.png作为主体，但是在识别出基本内容之后实现了基于内容的动态高度之前。

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

我几乎在任何地方搜索，但无法找到任何地方的具体情况。

帮助将非常感谢，所以感谢所有谁看着这一点。

编辑：我发现这篇文章：Dynamic table size html可能有帮助，也许这是一个解决方案，使用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>

来源

2012-09-27 Victor

不，你并不需要JavaScript或表。普通的ol'（基于div的）HTML和CSS将会诀窍。

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

我已经在类“inner”的每个部分中添加了一个（不可否认的）div，它获得了940之后的宽度。

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

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

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

来源

2012-09-28 12:42:53 chipcullen

是的，“内部”div做到了，很好，非常感谢！所以，我实际上想的太少了，嘿嘿。今天我已经用桌子进行了测试，这也是有效的，但是这个解决方案使html更清晰，即使是非语义的内部div。但是谁关心语义，毕竟它完美的工作:-)再次感谢！ – Victor

很高兴帮助！ – chipcullen

扩展动态背景

回答

相关问题