Question

请考虑以下代码：

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

我希望侧边栏始终具有右列的高度。

演示：http://www.bootply.com/FT3DVckZgp

Answer 1

使用表格方法。它适用于所有浏览器。将display: table提供给父级，将display: table-cell提供给子级。

.row {
    display: table;
}

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

以下是fiddle

另一种很酷的方法是利用边距。

.row{
    overflow: hidden; 
}

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

以下是fiddle

Answer 2

您可以使用以下代码通过显示布局表格， table-cell 来定义相同高度的列。

定义这些CSS类

.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%;
}

对于小型设备，请使用此媒体查询

@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%;
 }
}

现在在HTML结构中应用这些类，如下所示

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

Answer 3

将id提供给第二个右侧col并在页面加载时使用jquery as

$("#sidebar").css("height", $("#IdOfRightDiv").height());

Answer 4

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);
});

Answer 5

你可以去显示：table属性来获得你想要的输出

Have Tweeted Your Code

检查上面的链接

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

Bootstrap等高柱

5 个答案: