Melhor maneira de dimensionar um elemento para o tamanho de outro elemento

Estou usando um truque CSS antigo para obter um plano de fundo semitransparente para algum conteúdo, sem que o conteúdo pareça semitransparente. Aqui está o HMTL:

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

Aqui está o CSS correspondente:

#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;
}

Meu problema é esse porque#frame é position: relativa, sua altura não se expande dinamicamente com seu conteúdo. Ambos#opacityFrame e#contentFrame são definidos como 100% de altura e largura e se expandem adequadamente para preencher#frame o que é ótimo. A questão é que eu preciso de#frame altura de @ para crescer com o conteúdo da criançaDIV do#contentFrame porque aquiloDIV altura de @ ajusta-se dinamicamente com o conteúdo colocado nel

Acabei tendo que criar uma função jQuery:

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

NOTA: A razão pela qual há uma criançaDIV do#contentFrame é porque#contentFrame altura de @ sempre é nula por algum motivo estranho. Estou assumindo que tem a ver com o seuposition serabsolute.

Este código funciona muito bem e redimensiona com precisão#frameltura de @ à altura da criançaDIV do#contentFrame. No entanto, eu faço muito ajax que altera o conteúdo dentro desseDIV. Uma solução seria ligar pararesizeFrame() com TODOS os eventos do ajax, mas parece tão tedioso. Existe um evento ou algo que eu possa vincular que execute essa função sem que eu precise explicitamente chamá-la? Eu tentei os seguintes eventos, mas eles não pareciam funcionar; talvez eu tenha feito errad

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

Nenhum destes parecia disparar quando o conteúdo da criançaDIV foram modificados. Qualquer ajuda é apreciada. Talvez eu esteja fazendo isso da maneira errada? Não quero usar imagens transparentes para o fundo.

questionAnswers(2)

yourAnswerToTheQuestion