在 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 -->

Answer 1

我在您的右栏中添加了一个 ID，以便我可以引用它。

<!-- /left column -->
    <div class="col-md-9 padT nPadL nPadR" id="rightColumn">

这里是 jQuery

$(document).ready(function(){
   $('.delLtBlueBg').height($('#rightColumn').height());
});

http://jsfiddle.net/zK9MA/