Question

html网页设计，怎么使用div+css实现这样的效果：

现有三个div，姑且称之为div1、div2、div3，其中div2、div3存在于div1中，div1的高度是随内容变化而变化的，如何让div2、div3的背景图片的高度和div1一样自适应变化，最终的目的是使div1、div2、div3高度一样高。。。

Answer 1

简单，看好了
css样式
div1{
padding:0;margin:0;
}
div2{
width:50%;height:100%;
padding:0;margin:0;
position:relative;
float:right;}
img{
position:absolute;left:0;top:0;z-index:-10;
width:100%;height:100%;}
div3{
width:50%;height:100%;
padding:0;margin:0;
position:relative;
float:left;}
div4{
clear:both;}
<div id="div1">
<div id="div2"><img src=""/>内容</div>
<div id="div3"><img src=""/>内容</div>
<div id="div4"></div>
</div>
div4的作用就是让div1变大，自动变化。
有问题QQ1039778008，还有上面只是我写得一些想法，具体情况还要看你的文本。欢迎任何对css+div有问题的人来找我。

Answer 2

1、纯css是做不到的。得用js读取div1的高度，然后设置div2和div3 的高度，才可以做到。
2可以不用div2和div3，吧div2和div3设置成一个背景图，既然都是垂直平铺做成一个图就是了，分开做没啥意义啊，将这个背景图直接设置在div1的背景上不就行了。为什么一定要分开。

追问

div2、div3我设置成height：100%；，ie浏览器不行，其他还好的，如果做一个图太大了。。。 你能不能帮我写个js 我在网上找了一些，不起作用。。。。等待中。。。。。

Answer 3

DIV本身就是自适应高度的.你只要把背景图片做到足够内容放上去后.背景能正常显示就可以的啊.

追问

这样说吧，div1是一个主体，div2、div3分别是两张图片，让他们在垂直方向平铺，并让div2、div3附着于div1这个主体上面。然后div2、div3的css里面分别有left：-100px ；right：-100px ；这样说更好理解。。。

追答

div2.div3里面也有背景平铺?然后DIV1的内容高度随2.3的内容增高而增高是吧.
你DIV是要自适应屏幕高度还是说适应DIV高度.第一种的话是要写JS.第二种就简单.

还有2 . 3我是把他作左右浮动层来做.你上面的是做定位层啊.

追问

那个解决了，现在有一个新问题：只引用一张图片，上中下三部分，截取（background-position：******）中间一部分让它垂直方向重复出现，这个怎么实现？

追答

你说的是CSS Sprite技术吧.背景重复这个可能有点难.CSS Sprite主要运用于一些宽高度设定好的.自动延伸的可能会有点难度.你可以把顶部与底部做一张.然后中间的背景图做一张平铺好了.我一般是这样做的.CSS Sprite技术就是把所有的背景图片整合在一张图片上.这要看你网站的东西多不.小弄的网站没必要全部.把大部分的放一张是可行的.熟练掌握后可慢慢调整~

Answer 4

div2和div3都在div1中占据空间，div1包含他们，div1能和他们一样高?