如何使引导列高度达到100% 的行高度？

我还没有找到一个合适的解决方案，这似乎是微不足道的。

我在一行中有两列:

<div class="row">
<div class="col-xs-9">
<div class="left-side">
<p>sdfsdf</p>
<p>sdfsdf</p>
<p>sdfsdf</p>
</div>
</div>
<div class="col-xs-3">
<div class="something">asdfdf</div>
</div>
</div>

行高由较大的行 left-side设置。然而，我希望右边的高度是相同的。

这看起来很直观，但是不起作用

.left-side {
background-color: blue;
}
.something {
height: 100%;
background-color: red;
}
.row {
background-color: green;
}

Http://jsfiddle.net/ccorcos/jz8j247x/

225255 次浏览
小开
最佳答案

可以使用 展示表解决这个问题。

这里 是解决问题的更新后的 JSFiddle。

CSS

.body {
display: table;
background-color: green;
}


.left-side {
background-color: blue;
float: none;
display: table-cell;
border: 1px solid;
}


.right-side {
background-color: red;
float: none;
display: table-cell;
border: 1px solid;
}

超文本标示语言

<div class="row body">
<div class="col-xs-9 left-side">
<p>sdfsdf</p>
<p>sdfsdf</p>
<p>sdfsdf</p>
<p>sdfsdf</p>
<p>sdfsdf</p>
<p>sdfsdf</p>
</div>
<div class="col-xs-3 right-side">
asdfdf
</div>
</div>
小开

@ Alan 的回答会满足你的要求，但是当你使用 Bootstrap 的响应能力时，这个解决方案就失败了。在您的例子中，您使用的是 xs大小，所以您不会注意到，但是如果您使用了其他的大小(例如 col-sm、 col-md等) ，您就会理解。

另一种方法是使用页边距和填充。参见更新后的小提琴: Http://jsfiddle.net/jz8j247x/1/

.left-side {
background-color: blue;
padding-bottom: 1000px;
margin-bottom: -1000px;
height: 100%;
}
.something {
height: 100%;
background-color: red;
padding-bottom: 1000px;
margin-bottom: -1000px;
height: 100%;
}
.row {
background-color: green;
overflow: hidden;
}

提交答案