Html 如何使引导列高为 100% 行高？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25213171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap column height to 100% row height?
提问by Chet
I haven't found a suitable solution to this and it seems so trivial.
我还没有找到合适的解决方案，这似乎很微不足道。
I have two columns inside a row:
我在一行中有两列：
<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>
The row height is set by the larger row, left-side. However, I want the right side's height to be the same.
行高由较大的行设置left-side。但是，我希望右侧的高度相同。
This seems intuitive, but it doesn't work
这看起来很直观，但它不起作用
.left-side {
background-color: blue;
}
.something {
height: 100%;
background-color: red;
}
.row {
background-color: green;
}
采纳答案by Alan Souza
You can solve that using displaytable.
您可以使用显示表解决该问题。
Hereis the updated JSFiddle that solves your problem.
这是解决您问题的更新后的 JSFiddle。
CSS
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
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>
回答by Esteban
@Alan's answer will do what you're looking for, but this solution fails when you use the responsive capabilities of Bootstrap. In your case, you're using the xssizes so you won't notice, but if you used anything else (e.g. col-sm, col-md, etc), you'd understand.
@Alan 的答案会满足您的要求，但是当您使用 Bootstrap 的响应功能时，此解决方案会失败。在你的情况，你正在使用的xs大小，所以你不会注意到，但如果你用过别的（如col-sm，col-md等），你就会明白。
Another approach is to play with margins and padding. See the updated fiddle: http://jsfiddle.net/jz8j247x/1/
另一种方法是使用边距和填充。查看更新的小提琴：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;
}
