1

I have a left menu with a colored background that should always match the height of the right content. Problem is that the right content usually has more information than the left so they are unbalanced... and with colors, this is painfully obvious. My first thought is height 100%, but this does not solve the issue. In the fiddle below, you can give a height such as 300px to fill the space, but I'd rather not hardcode this because on a smaller resolution it looks messy and all this height can be unnecessary. Is there any clean way to go about adjusting this accordingly? Thanks in advance.

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

1 回答 1

2

我在您的右栏中添加了一个 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/

于 2013-10-30T19:50:54.240 回答