CSS make images the same height as the containing element

This is the markup

img.shadow | div#content |div.shadow

I need to find a way to reliably keep the shadow开发者_如何学JAVA images the same height as the content area. Problem is the content area can resize (like tabs that have different height, or parts of it that only appear in certain conditions). I was able to set the height of the shadow using javascript on page load, but then as soon as the height of the #content changes... not sure this makes sense, but...

Maybe this explains the problem better

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

The question is

how can I make the images (the grey boxes) resize along with the content (light grey box)?

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

You did it urself? :P

You could put the resize call inside the function that adds the content as well, like this:

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

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

Or it seems like you could get rid of the shadow images and the call to resize it entirely, and just add a border to the content in the CSS:

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