如何使bootstrap列高度到100％行高？ [英] How to make bootstrap column height to 100% row height?

问题描述

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

I haven't found a suitable solution to this and it seems so trivial.

我在一行有两列：

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

行高度由较大的行设置， code>。

The row height is set by the larger row, left-side. However, I want the right side's height to be the same.

这似乎很直观，但不起作用。

This seems intuitive, but it doesn't work

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

http://jsfiddle.net/ccorcos/jz8j247x/

推荐答案

您可以使用显示表。

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

Here is the updated JSFiddle that solves your problem.

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>

这篇关于如何使bootstrap列高度到100％行高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！