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/

在Bootstrap中调整垂直高度对齐以匹配相邻高度？

1 个答案: