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.
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
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> 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); }); Give id to the second right col and on page load use jquery as
$("#sidebar").css("height", $("#IdOfRightDiv").height()); You can Go For the Display:table Property to Get the Output You Desired
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> 