将元素大小设置为另一个元素的大小的最佳方法 [英] Best way to size an element to the size of another element

问题描述

我使用一个旧的CSS技巧获得半透明的背景的一些内容，没有内容出现半透明。这是HMTL：

I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the 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 是position：relative，它的height不会随着其内容动态扩展。 #opacityFrame 和 #contentFrame 都设置为100％的高度和宽度，并适当地展开以填充 #frame 这是伟大的。问题是，我需要 #frame 的高度随着孩子的内容增长 DIV of #contentFrame ，因为 DIV 的高度会根据放置的内容动态调整。

My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.

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

I ended up having to create a jQuery function:

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

注：原因是有一个子 DIV 的 #contentFrame 是因为 #contentFrame 的高度总是因为某些奇怪的原因而为零。我假设它与它的位置是绝对。

NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.

这段代码工作得很好，准确地将 #frame 的高度调整到子的高度 DIV 的 #contentFrame 。但是，我做了很多ajax，改变了 DIV 内的内容。一个解决方案是调用 resizeFrame（）与每个ajax事件，但它只是看起来很乏味。有没有事件或东西，我可以绑定到那将执行这个函数没有我明确地不必调用它？我试过以下事件，但他们似乎没有工作;可能我错了。

This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.

• $（'＃subFrame> div'）resize code>


• $（'＃subFrame> div'）。change（）

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

当子 DIV 的内容被修改时，这两个都不会触发。任何帮助是赞赏。也许我要这个错误的方式吗？我不想使用透明图像作为背景。

Neither of these seemed to fire when the contents of the child DIV were modified. Any help is appreciated. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.

推荐答案

尝试采取位置：绝对离开contentFrame， opacityFrame。这应该导致它的父级调整大小，并且opacityFrame仍然覆盖一切。

Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.

这篇关于将元素大小设置为另一个元素的大小的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！