如何使bootstrap柱高度达到100%行高?

时间:2014-08-08 22:30:34

标签: html css twitter-bootstrap

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

我在一行中有两列:

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

2 个答案:

答案 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-smcol-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;
}