html - 为什么 height 100% 不能将 div 完全扩展到页面底部？

Question

我希望 #f8f8f8 延伸到页面底部。我尝试将 height: 100%; 添加到 .tab-content 但没有任何反应。

有什么建议吗？

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.tab-container {
  color: #fff;
  background: #000;
}

.tab-content {
  background: #f8f8f8;
  height: 100%; /* doesn't work */
}

<div class="vreditor-sdk">
  <div class="building">
    <div class="header"></div>
    <div class="i-tab">
      <div class="tab-container">
      </div>
      <div class="tab-content">
        Test
      </div>
    </div>
  </div>
</div>

Answer 1

在 css 中，当您以百分比形式给出高度时，它将采用父高度的百分比。

将 height: 100%; 赋给 .tab-content 意味着它占用 .itab 的 100% 高度> 不是页面。所以如果你想让你的 .tab-content 覆盖整个页面，你的 .itab 需要先覆盖整个页面。在到达 html 元素之前，每个直接父级都会发生同样的情况。

所以你的修复应该是

html, body, .vreditor-sdk, .building, .itab, .tab-content {
    height: 100%:
}

html 占页面的 100% 高度，body 占 html 的 100% 高度，与页面高度等同......

这就是您的页面高度如何到达您的.tab-content