jquery - Bootstrap で垂直方向の高さの配置を調整して、隣接する高さに合わせますか?

Question

右のコンテンツの高さと常に一致する色付きの背景を持つ左のメニューがあります。問題は通常、右のコンテンツが左のコンテンツよりも多くの情報を持っているため、バランスが取れていないことです...そして色を使用すると、これは痛々しいほど明白です. 私の最初の考えは高さ 100% ですが、これで問題は解決しません。以下のフィドルでは、300px などの高さを指定してスペースを埋めることができますが、解像度が小さいと乱雑に見え、この高さがすべて不要になる可能性があるため、これをハードコーディングしたくありません。それに応じてこれを調整するためのクリーンな方法はありますか? 前もって感謝します。

http://jsfiddle.net/YSmK7/5/

HTML

<div class="container">
    <div class="row padB">
        <!-- tie together left and right -->
        <div class="col-md-3 padT delLtBlueBg" style='height: contain !important'>
            <!-- left column -->
            <div class='row padB'>
                <!-- left header section -->
                <div class="col-md-11">
                    <label>Integrated Models</label>
                </div>
            </div>
            <!-- left options -->
            <div class="col-md-12 padT padB nPadL nPadR selectFilter">
                <label class='padL'>Reference</label>
            </div>
        </div>
        <!-- /left column -->
        <div class="col-md-9 padT nPadL nPadR">
            <!-- right column -->
            <div class="col-md-12 text-center padT">
                 <h4 class='text-left'>Reference</h4>

                 <h6 class='text-left padB'>*Please select a reference case or scenario to activate the footer menu</h6>

                <table class='allW zebra' cellpadding='5' cellspacing='5'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Iterations</th>
                            <th>Error Level</th>
                            <th>Percentage Completed</th>
                            <th>Time Taken</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>New Scenario 3</td>
                            <td><span class="glyphicon glyphicon-ok-sign delGreen"></span> Complete</td>
                            <td>500</td>
                            <td>0.4907</td>
                            <td>100</td>
                            <td>00:03:10</td>
                            <td><span class="glyphicon glyphicon-trash delGreen" title='Delete'></span>
                            </td>
                        </tr>
                        <tr>
                            <td>New Scenario 4</td>
                            <td><span class="glyphicon glyphicon-ok-sign delGreen"></span> Complete</td>
                            <td>500</td>
                            <td>0.4707</td>
                            <td>100</td>
                            <td>00:04:10</td>
                            <td><span class="glyphicon glyphicon-trash delGreen" title='Delete'></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class='col-md-12 spacer'></div>
                <div class='col-md-12 spacer'></div>
                <div class='col-md-12 spacer'></div>
            </div>
        </div>
        <!-- /right column -->
    </div>
    <!-- /row -->
    <div class="row padT padB navbar navbar-inverse">
        <div class="allW padT footerIcons nPadL nPadR text-center"></div>
    </div>
    <footer class='container navbar-fixed-bottom padB'>
        <hr>
        <div class='col-md-6'>Copyright © 2013 All rights reserved.</div>
        <div class='col-md-6 text-right'>   <a href='#'>About</a> | <a href='#'>Contact</a>

        </div>
    </footer>
</div>
<!-- /container -->