如何使自举列高度达到100％行高？

我还没有find合适的解决scheme，这似乎很微不足道。

我在一行中有两列：

<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/

Answer 1

你可以使用显示表来解决这个问题。

这里是更新的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> 

Answer 2

@ Alan的答案将会做你正在寻找的东西，但是当你使用Bootstrap的响应能力时，这个解决scheme会失败。 在你的情况下，你使用的是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; }