根据色谱柱高度改变背景

Question

我无法想出如何做这个布局的好主意。 Click for the image

所以基本上有2列。左和右。两列分为上部和下部（两部分的上部高度相同）。上半部分有一个半透明的背景图像，通过它可以看到背景图像（这是非常多变的，所以不能选择截图）。下部是浅色的 上部的左列（称为Area 1）包含元素，其高度将决定两列的整个半透明上部的高度。区域1中的更多文本意味着半透明部分将变得更高，以适合所有文本 下部（Area 2）部分中的左列包含如果不适合将放大白色背景容器的元素。
右侧部分从上到下包含一个单独的框（Area 3）。它的高度根本不影响上部（半透明）部分，但它确实影响下面白色容器的高度，以及区域2，它必须变得足够高以适应它们。

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

谢谢。

P.S。 对不起那个不太明确的标题感到抱歉。我发现很难在这一卷文中表达这个问题，更不用说描述它的简短标题了。

Answer 1

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

修改
我的坏，绝对是行不通的。但是你可以用浮点数更容易地做到这一点。 Fixed example

Answer 2

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