html - 行高未正确显示

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