我还没有找到合适的解决方案,这似乎是微不足道的。
我在一行中有两列:
<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;
}
答案 0 :(得分:58)
您可以使用显示表来解决此问题。
Here是更新的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;
}
<强> HTML 强>
<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>
答案 1 :(得分:24)
@Alan的回答将完成您正在寻找的内容,但是当您使用Bootstrap的响应功能时,此解决方案将失败。在您的情况下,您使用的是xs
尺码,因此您不会注意到,但如果您使用了其他任何内容(例如col-sm
,col-md
等),那么您和&#39} #39; d了解。
另一种方法是使用边距和填充。看到更新的小提琴: 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;
}