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的高度与DIV的{{1}}个孩子的内容一起增长，因为#contentFrame的高度会根据放置的内容动态调整它。

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

DIV

注意：function resizeFrame() { $('#frame').height($('#contentFrame > div').height()); }的孩子DIV的原因是#contentFrame的高度因某些奇怪的原因总是读为零。我假设它与#contentFrame position有关。

此代码效果很好，可以准确地将absolute的高度调整为#frame的孩子DIV的高度。但是，我做了很多改变#contentFrame内容的ajax。一个解决方案是使用每个ajax事件调用DIV，但它看起来很单调乏味。是否有一个事件或我可以绑定的东西会执行此功能而不必明确地调用它？我尝试了以下事件，但似乎没有奏效;也许我做错了。

resizeFrame()
$('#subFrame > div').resize()

当孩子$('#subFrame > div').change()的内容被修改时，这些似乎都没有触发。任何帮助表示赞赏。也许我会以错误的方式解决这个问题？我不想在背景中使用透明图像。

Answer 1

尝试取位置：绝对关闭contentFrame，但将其保留在opacityFrame上。这应该导致它的父级调整大小，并且opacityFrame仍然覆盖所有内容。

Answer 2

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

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

2 个答案: