为何height:100%无法让div铺满页面底部？求解决方案

我希望背景色为#f8f8f8的.tab-content元素能延伸至页面底部，尝试为其添加height:100%属性但未生效。相关代码如下：

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"></div>
    </div>
  </div>
</div>

嘿，这个问题我太熟了！你遇到的是CSS百分比高度的经典坑——百分比高度是基于父元素的明确高度来计算的，你只给html和body设了100%高度，但.tab-content的所有上层父元素（.i-tab、.building、.vreditor-sdk）都没有设置高度，它的height:100%根本找不到参照标准，自然就不生效啦。

给你几个实用的解决思路，按推荐程度排序：

方案一：用Flexbox布局（最推荐） #

Flexbox是现在做这种自适应布局最省心的方式，不需要一层层设置百分比高度，还能自动处理空间分配：

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
}
/* 让最外层的building变成垂直方向的flex容器 */
.building {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 头部如果是固定高度，直接设置就行 */
.header {
  height: 60px; /* 换成你实际的头部高度 */
}
/* 让i-tab占满building的剩余空间 */
.i-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tab-container { color: #fff; background: #000; }
/* 让tab-content占满i-tab的剩余空间 */
.tab-content { 
  background: #f8f8f8; 
  flex: 1;
}

就算以后头部高度变了，也不用手动改计算值，Flex会自动调整剩余空间，完美适配。

方案二：给所有父元素设置100%高度 #

如果不想用Flex，那就得把.tab-content往上的每一层父元素都加上height:100%，同时注意处理可能的溢出问题：

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
}
/* 给所有上层父元素设置100%高度 */
.vreditor-sdk, .building, .i-tab {
  height: 100%;
  /* 可选：如果元素有padding/border，加上这个避免溢出 */
  box-sizing: border-box;
}
/* 注意：如果header有高度，这里要调整i-tab的高度 */
/* .i-tab { height: calc(100% - 60px); } */
.tab-container { color: #fff; background: #000; }
.tab-content { background: #f8f8f8; height: 100%; }

这个方案要注意，如果页面里有固定高度的元素（比如header），就得用calc()去减去对应的高度，不然整个页面会超出视口。

方案三：绝对定位兜底 #

如果你的布局场景适合用绝对定位，也可以试试这个方法：

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0;
  position: relative;
}
.i-tab {
  position: relative;
  min-height: 100%;
}
.tab-content {
  background: #f8f8f8;
  position: absolute;
  top: 40px; /* 这里换成.tab-container的实际高度 */
  left: 0;
  right: 0;
  bottom: 0;
}

不过这个方案需要你明确知道.tab-container的高度，灵活性不如前两个，适合一些特殊布局场景。

内容的提问来源于stack exchange，提问作者alex