行高显示不正确

Question

我使用 bootstrap 2.3.2 css 创建了一个 html 东西。 html 将有四行不同的高度，例如第一行将分别为 10%、第二行 - 20%、第三行 - 40% 和第四行 - 40%。 html 正在渲染，但问题是每行的高度显示不正确。

谁能告诉我一些解决方案

我的代码如下

JSFiddle

html

<div id="content">
  <div class="row1">
    <div class="row-fluid">
      <div class="span6">content1</div>
      <div class="span6">content1</div>
    </div>
  </div>
  <div class="row2">
    <div class="row-fluid">
      <div class="span6">content2</div>
      <div class="span6">content2</div>
    </div>
  </div>
  <div class="row3">
    <div class="row-fluid">
      <div class="span4">content3</div>
      <div class="span4">content3</div>
      <div class="span4">content3</div>
    </div>
  </div>
  <div class="row4">
    <div class="row-fluid">
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
    </div>
  </div>
</div>

css

.row1 {
  height: 10%;
  background: red;
}

.row2 {
  height: 20%;
  background: yellow;
}

.row3 {
  height: 40%;
  background: orange;
}
.row4 {
  height: 40%;
  background: violet;
}

#content {
  height: 100%;
}

Answer 1

为了使用基于百分比的身高，所有祖先必须有定义的身高。

将此添加到您的示例中：

html, body {
  height: 100%;
}

JSFiddle

如果您的元素嵌套过多，更好的解决方案可能是改用以下内容：

#content {
  height: 100vh;
}

JSFiddle

行高显示不正确

row height is not displaying correctly

html

css

twitter-bootstrap

rows

row-height