【jQuery】高さ取得、均等

by tea4two

HTML

<div id="container">

<div id="left">
<p>長い方</p>
<p>長い方</p>
<div><img src="http://placekitten.com/g/200/300" alt="" /></div>
</div><!-- /#left -->

<div id="right">
<p>短い方</p>
</div><!-- /#right -->

</div><!--#container-->

CSS

#container {
    width: 500px;
    border: 1px solid #ddd;
}
#container:after {
    /* クリアフィックス用 */
    content: '';
    clear: both;
    display: table;
    height: 0;
    min-height: 0;
    visibility: hidden;
}

#left {   
    width: 250px;
    float: left;
    background-color: lightyellow;
}

#right {
    float: right;
    width: 150px;
    background-color: skyblue;
}

JavaScript

$(window).on('load', function(){
        
        var _l = $('#left'),
            _r = $('#right'),
            _lh = _l.height(),//左高さ
            _rh = _r.height();//右高さ
        
        (_lh >= _rh)?_r.css('height',_lh+'px'):_l.css('height',_rh+'px');
        
        
    });