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