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

行高未正确显示

1 个答案: