使列的高度相同

Question

With two columns in the same row, I would like the shorter column to expand its height to match the taller one.

 @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); #small-col { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row"> <div class="col-xs-8"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor. </div> <div class="col-xs-4" id="small-col"> Aliquam eget fermentum magna, nec congue diam. </div> </div> 

Answer 1

You can do it easily by using some CSS rules

 #small-col { background-color: blue; } .row { display: table; } .row [class*="col-"] { float: none; display: table-cell; vertical-align: top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row"> <div class="col-md-8"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor. </div> <div class="col-md-4" id="small-col"> Aliquam eget fermentum magna, nec congue diam. </div> </div> 

Update : a responsive way to do that.

You can use a jQuery code to do that.

Simply place a .same-height to the divs you want to target.

Then add this code to your JavaScript file:

    boxes = $(".same-height");
    maxHeight = Math.max.apply(Math, boxes.map(function () {
        return $(this).height()
    }).get());
    boxes.height(maxHeight);

Answer 2

I usually make use of a little trick by applying the background color for the shorter column to the row element and then apply background-color to the taller column as well:

 @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); #small-col { background-color: blue; } #big-col { background-color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row" id="small-col"> <div class="col-xs-8" id="big-col"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor. </div> <div class="col-xs-4"> Aliquam eget fermentum magna, nec congue diam. </div> </div>