Question

在这种情况下，col中的高度：100％不起作用，因为.row不是高度

div[class*='col']
{
    border:solid 1px #000;
    height:100%;
}
.row
{
    border:solid 1px #000;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

如果我为行设置高度，则所有cols都可以匹配行高。但是我不想设置行的高度，因为我希望行高可以匹配最大的col高度。如何使用css使所有cols高度达到100％？

div[class*='col']
{
    border:solid 1px #000;
    height:100%;
}
.row
{
    border:solid 1px #000;
    height:500px;
}


<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

Answer 1

您可以尝试display: table-cell;。

以下是更新后的code

 div[class*='col']
        {
            border:solid 1px #000;
            height:100%;
          display: table-cell;
          float: none
        }
        .row
        {
            border:solid 1px #000;
            /* height:500px; */
          display: table;
          width: 100%

        }

Answer 2

如果没有固定的参考高度，就无法提出解决方案。

您可以在此处应用两种选择：

使用固定高度创建.col div并将溢出属性设置为自动，因此如果内容超出固定高度，则滚动条将显示在jfiddle：http://jsfiddle.net/9FFgN/1/
使用jquery解决此问题

如何在Bootstrap 3中匹配所有col高度与行高？

2 个答案: