3

Consider the code below:

<div class="row">
  <div class="col-xs-3"><div id="sidebar">sidebar</div></div>
  <div class="col-xs-3">content content content content content content content content content content content content content content content</div>
</div>

I want the sidebar always has the height of the right column.

Demo: http://www.bootply.com/FT3DVckZgp

Ryan
  • 10,041
  • 27
  • 91
  • 156

5 Answers5

4

Use table method. It works in all browsers. Give display: table to parent and display: table-cell to children.

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Here is the fiddle

Another cool method is with the help of margins.

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Here is the fiddle

Jinu Kurian
  • 9,128
  • 3
  • 27
  • 35
1

You can use following code to define column of same height by providing display layout as table, table-cell.

Define these CSS classes

.container-sm-height 
{
  display: table;
  padding-left:0px;
  padding-right:0px;
}
.row-sm-height 
{
   display: table;
   table-layout: fixed;
   height: 100%;
}
.col-sm-height 
{
  display: table-cell;
  float: none;
  height: 100%;
}

For Small devices use this media query

@media (min-width: 480px) 
 {
 .row-xs-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
 }
.col-xs-height {
  display: table-cell;
  float: none;
  height: 100%;
 }
}

Now Apply these classes in your HTML structure as following

 <body>
    <div class="row container-fluid row-sm-height">
        <row class="col-sm-3 col-sm-height" id="sidebar">
            <!--your code-->
        </row>

        <row class="col-sm-9 col-sm-height">
            <!--Your code-->
        </row>
    </div>
</body>
Himanshu Vaghela
  • 1,089
  • 11
  • 21
Ashish Shukla
  • 1,239
  • 12
  • 23
1

HTML

<div class="row">
  <div class="col-xs-3 euqlHeight"><div id="sidebar">sidebar</div></div>
  <div class="col-xs-3 euqlHeight">content content content content content content content content content content content content content content content</div>
</div>

JS

var maxHeight = 0;
$(document).ready(function() {
    $(".euqlHeight").each(function() {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    $(".euqlHeight").height(maxHeight);
});

$(window).resize(function() {
    maxHeight = 0;
    $(".euqlHeight").removeAttr("style");
    $(".euqlHeight").each(function() {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    $(".euqlHeight").height(maxHeight);
});
Ashish Mehta
  • 7,226
  • 4
  • 25
  • 52
0

Give id to the second right col and on page load use jquery as

$("#sidebar").css("height", $("#IdOfRightDiv").height());
Anil Panwar
  • 2,592
  • 1
  • 11
  • 24
-1

You can Go For the Display:table Property to Get the Output You Desired

Have Tweeted Your Code

Check the above Link

<div class="row" style="display:table">
 <div id="sidebar" class="col-xs-3" style="display:table-cell;float:none"><div>sidebar</div></div>
 <div class="col-xs-3" style="display:table-cell;float:none">content content content content content content content content content content content content content content content</div> 
</div>
subbu1191
  • 1
  • 1