jquery - 溢出 div 内容需要灵活的高度

Question

我有左右两个 div 框...我需要在右 div 框中灵活列出高度，因为左框内容不固定...意味着如果我在“左 div 框”中添加一些内容..那么“右 div 框”自动流内容框高度应相应调整

这是一个链接

/ css /

.dvleft{float:left;} .dvright{float:right}.dv100per{width:100%;float:left}
.grey_bg2{padding: 5px 0px 8px 7px;background-color:#F7F7F7;color:#000; font-size:13px}
.mTop5{margin-top:5px;}.mTop10{margin-top:10px}.mTop20{margin-top:20px}.mleft15{margin-left:15px;}
    .contactlist{background-color:#FFF;float:left;width:100%;padding: 5px 0px 10px 0px;height:239px;overflow:auto}
    .sharecon{float:left;width:100%; border-bottom:solid 1px #e6e6e6; padding:3px 0 6px 0}

/ HTML /

<div class="dvright grey_bg2 mTop20" style="width: 365px; padding: 7px 8px 10px 8px;">
    <div class="dv100per">
        <span class="dvleft">
            <strong>Right Box</strong>
        </span>
    </div>

        <div class="contactlist">
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
        </div><!--contactlist-->

</div><!--Right Block Ends Here--->

</div>

Answer 1

你可以使用 jquery equalizeCols插件

Answer 2

如果你是一个使用 j Query 然后试试这个，

$(function(){
    var leftDivHeight = $('.dvleft').height();
    var rightDivHeight = $('.dvright').css({height: leftDivHeight});
});