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

将background -color属性放在i-tab类

中

.i-tab { 
background-color: #f8f8f8;
}

并将其从制表符内容类中删除。

Answer 2

在css中，当你给出高度百分比时，它将占父高的百分比。

将height: 100%;提供给.tab-content表示100%高度.itab不是页面。因此，如果您希望.tab-content覆盖整个页面，则.itab需要先覆盖整个页面。在您到达html元素之前，每个直接父级都会发生相同的情况。

所以你的修复应该是

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

html占用页面的100％高度，正文占用与页面高度相同的html高度100％等等...

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

的方式

为什么高度不是100％将div完全扩展到页面底部？

2 个答案: