Question

这是一个由好奇心而非实际问题驱动的问题。我试图更好地理解CSS。

百分比高度（和宽度）应该相对于包含块（see here）。

绝对定位的块的包含块是最近的祖先，其位置是＆＃34; （即绝对，相对或固定 - see here）。

所以我希望这个例子中的内部div跨越整个可用高度：

<div class="full-height">

  <div>
    <div id="main-block">
    x
    </div>
  </div>

</div>

html, body, .full-height {
  height: 100%;
  position: relative;
}

用这个css：

#main-block {
  height: 100%;
  background-color: red;
}

或者只需this fiddle。

那么这里发生了什么？

Answer 1

你并没有完全定位你的主块。这样做，它将占据全高。

html, body, .full-height {
  height: 100%;
  position: relative;
}

#main-block {
  height: 100%;
  background-color: red;
  position:absolute
}

    <div class="full-height">

      <div>
        <div id="main-block">
        x
        </div>
      </div>

    </div>

Answer 2

问题很简单，您有一个额外的<div>，它是#main-block的父级，它没有设定的高度。考虑到您没有为此元素指定100%的高度，它仅使用默认高度。对于<div>，0px。

#main-block尝试占用此额外100%（而非其父母）的<div>高度。考虑到#main-block包含内容（x），它会自动展开以允许显示内容。

删除此额外<div>会按预期显示带有红色背景的整页：

＆＃13;

html, body, .full-height {
  height: 100%;
  position: relative;
}

#main-block {
  height: 100%;
  background-color: red;
}

＆＃13;

<div class="full-height">
  <div id="main-block">
    x
  </div>
</div>

＆＃13;

相反，保留这个额外的父<div>并使其高度为100%将也为您提供全高红色背景。请注意，这只会为您提供与#main-block内容本身一样多的宽度;如果您希望它是全宽的，除了width之外，您还需要指定height：

＆＃13;

html, body, .full-height {
  height: 100%;
  position: relative;
}

#main-block {
  height: 100%;
  background-color: red;
}

.full-height > div {
  position: absolute;
  height: 100%;
}

＆＃13;

<div class="full-height">
  <div>
    <div id="main-block">
      x
    </div>
  </div>
</div>

＆＃13;

另请注意，<div>的默认位置为static，而不是absolute。

希望这有帮助！：）

绝对定位块的百分比高度

2 个答案: