Css 根据柱高度改变背景

我很难想出一个好主意如何做这个布局。

所以基本上有两列。左和右。两个立柱分为上部和下部（上部在两个立柱中的高度相同）。上半部分有一个半透明的背景图像，通过它可以看到背景图像（这是非常可变的，所以截图不是一个选项）。下部为素色。
上部的左栏（称之为

区域1

）包含元素，元素的高度将决定两栏的整个半透明上部的高度。区域1中的文本越多，表示半透明部分将越高，以适合所有文本。
下部（

区域2

）部分的左栏包含一些元素，如果它们不合适，将放大白色背景容器。
右侧部分从上到下包含一个方框（

区域3

）。它的高度根本不会影响上部（半透明）部分，但它确实会影响下面白色容器的高度，该高度必须足够高，以适应两个区域

那么，如何使上部（半透明）部分在区域1之后停止？如何使区域3向下扩展而不影响上部，但影响下部的高度？我知道如何使用JavaScript实现这一点，但我需要在CSS中实现这一点，至少对于最新的浏览器是如此（对于IE7等较旧的浏览器，我可以放置一些JS）

多谢各位

附言。

---

对不起，标题不太清楚。我发现在这卷文本中很难表达这个问题，更不用说用一个简短的标题来描述它了。

我用3种方式做了类似的布局。1-divs+css-这简直是地狱，你会为此浪费很多时间。2-使用JS，但你想避免它。和3-使用表格。如果区域3的高度为1+2，则表格合理、快速且简单。要使用透明度，请使用24位PNG或rgba颜色，这可以在IE（所有版本）中用作背景使用技术。如果您不介意使用JS/jQuery，可以通过rgba支持为IE添加一个新的CSS属性（-ms background color）。

那么，如何使上部（半透明）部分在区域1之后停止？如何使区域3向下扩展而不影响上部，但影响下部的高度

编辑

---

我的坏，绝对不会起作用。但实际上，你可以更轻松地使用浮动

但它不会扩展较低的（普通颜色的）容器。如果区域2的下限高于区域3，则区域3将位于任何容器外的站点背景上。我正在努力避免这种情况，这是行不通的。绝对定位div将脱离主容器，并且无法（使用纯CSS）强制主容器扩展到其绝对定位子容器的大小@Alexander@FreekOne谢谢大家。我已经修复了它，并为容器添加了边框，以查看它是如何伸展的。哇，谢谢。我现在会在我的页面上尝试，看看它是否有效，但它似乎是正确的答案。：）如何将半透明背景展开到表格布局中的第二列？它看起来确实像一个表，是的，一个2x2表，但是第二列的内容放在一行中，但是背景放在两行中。我已经检查过了，没有JS是无法做到这一点的。扩展背景的方法是使用position absolute，然后使用图层的z索引属性，但使用position:absolute时，不能再使用%Dimensions，必须使用像素。此外，绝对定位层不会以任何方式影响布局（不占用任何布局空间），因此没有其他框会扩展以适合它们。使用jQuery，您很快就能完成。查看解决方案，不使用JS，而且非常简单。在IE7上有问题，但IE7不是我的目标：）