CSS使图像与包含元素的高度相同

Question

这是标记

img.shadow | div＃content | div.shadow

我需要找到一种方法来可靠地保持阴影图像与内容区域的高度相同。问题是内容区域可以调整大小（例如具有不同高度的选项卡，或仅在某些条件下出现的部分）。我能够在页面加载时使用javascript设置阴影的高度，但是一旦#content的高度发生变化......不确定这是否有意义，但是......

也许这可以更好地解释问题

http://jsfiddle.net/uLUnf/28/

问题是

如何使图像（灰色框）与内容（浅灰色框）一起调整大小？

Answer 1

http://jsfiddle.net/uLUnf/29/

你自己做了吗？ ：P

Answer 2

您可以将调整大小调用放在添加内容的函数中，如下所示：

jQuery('document').ready(function($){
    $('#click_me').click(function(){
       var id = $(this).attr('href');
       $(id).show(); 
       $('.shadow').height($('#content').outerHeight());
    });

    $('.shadow').height($('#content').outerHeight());
})()  

或者看起来你可以摆脱阴影图像和完全调整它的调用，只需在CSS中为内容添加边框：

#content{
    float: left;
    display: block;
    background: #eee;   
    width: 200px;
    border-right: 7px solid #666;
    border-left: 7px solid #666;
}