最好的办法元素到另一个元素

我使用的是旧的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()); 
}

注：原因是有孩子的#contentFrameDIV是因为#contentFrame的身高总是读零一些奇怪的原因。我假设它的position是absolute。

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

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

这些都不似乎当孩子DIV的内容进行了修改，开火。任何帮助表示赞赏。也许我正在以这种错误的方式去做？我不想为背景使用透明图像。

来源

2011-03-15 Chev

“框架”也是一个标签的名字，所以我建议不使用这个词的一类，以避免在CSS文件中的混乱。 – 2011-03-16 02:07:35

框架不是一个类，它只是一个ID，通过'＃'显而易见。 – Chev 2011-03-16 03:43:16

作者很明显，但对于必须在6个月内更新网站的人来说，这并不明显。一般来说，不要为类和ID名称使用标签名称，这只是一个很好的经验法则。 – 2011-03-16 13:48:29

尝试采取立场：绝对关闭contentFrame的，但离开它的opacityFrame。这应该会导致它的父级调整大小，并且opacityFrame仍然覆盖所有内容。

来源

2011-03-15 20:24:26 Hersheezy

我想我尝试过但不记得。我现在会测试它，看看会发生什么。 – Chev 2011-03-15 20:25:25

http://jsfiddle.net/28FvM/编辑这个小提琴 – Hersheezy 2011-03-15 20:26:36

啊，是我没有尝试这个，'＃opacityFrame'越过'＃contentFrame'的顶部，并没有'Z-index'调整量将修复它，因为他们没有相同的“职位”规则。另请注意，在＃opacityFrame内放置＃＃contentFrame会导致＃contentFrame受到相同的“不透明度”规则的影响。 – Chev 2011-03-15 20:27:50

-1

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

来源

2011-03-16 02:08:30

我特别声明，我不想使用图像来实现这一点。是的，我需要不透明。请参阅http://www.CodeTunnel.com以了解实际的实施情况。 – Chev 2011-03-16 03:42:57

最好的办法元素到另一个元素

回答

相关问题