Bootstrap等高列[重复]答案

【问题标题】：Bootstrap equal height column [duplicate]Bootstrap等高列[重复]
【发布时间】：2016-04-05 20:24:35
【问题描述】：

考虑下面的代码：

<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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

将 id 赋予第二个右边的 col 并在页面加载时使用 jquery as

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

【讨论】：

【解决方案2】：

使用表格法。它适用于所有浏览器。将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

【讨论】：

【解决方案3】：

你可以使用 Display: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>

【讨论】：

【解决方案4】：

您可以使用以下代码通过提供显示布局为table、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>

【讨论】：

【解决方案5】：

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

【讨论】：