将元素大小调整为另一个元素大小的最佳方法

Question

我正在使用一个旧的 CSS 技巧来为某些内容获取半透明背景，而不会使内容看起来是半透明的。这是 HMTL：

<div id="frame">
    <div id="opacityFrame">
    </div>
    <div id="contentFrame">
        <div>
            <!-- Main Site Content Here -->
        </div>
    </div>
</div>

下面是对应的 CSS：

#frame
{
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 0;
}

#opacityFrame
{
    background: #00ff00;
    opacity: .15;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#contentFrame
{
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}

我的问题是因为#frame 是位置：相对的，它的高度不会随其内容动态扩展。 #opacityFrame 和 #contentFrame 都设置为 100% 的高度和宽度，它们会适当地扩展以填充 #frame，这很棒。问题是我需要#frame 的高度随着#contentFrame 的孩子DIV 的内容而增长，因为DIV 的高度会随着放置在其中的内容而动态调整。

我最终不得不创建一个 jQuery 函数：

function resizeFrame()
{
    $('#frame').height($('#contentFrame > div').height());
}

注意：#contentFrame 中有一个孩子 DIV 的原因是因为某些奇怪的原因，#contentFrame 的高度总是为零。我假设它与 position 是 absolute 有关。

此代码效果很好，可以准确地将#frame 的高度调整为#contentFrame 的孩子DIV 的高度。但是，我做了很多 ajax 来更改 DIV 中的内容。一种解决方案是使用每个 ajax 事件调用resizeFrame()，但这似乎很乏味。是否有一个事件或我可以绑定的东西可以执行这个函数而无需我明确地调用它？我尝试了以下事件，但它们似乎不起作用；也许我做错了。

• $('#subFrame > div').resize()
• $('#subFrame > div').change()

当子 DIV 的内容被修改时，这些似乎都没有触发。也许我会以错误的方式解决这个问题？我不想使用透明图片作为背景。

Answer 1

尝试将 position: absolute 置于 contentFrame 之外，但将其保留在 opacityFrame 上。这应该会导致它的父级调整大小，并且 opacityFrame 仍然覆盖所有内容。

Answer 2

你必须使用不透明度吗？如果是纯色，请考虑 RGBA，如果不是纯色，请考虑半透明 PNG。这样你就可以嵌套它们。