为何.songs-container百分比高度不生效？如何修复？

问题描述 #

我采用百分比值设置文档布局，预期实现以下效果：

• 将html元素高度设为100vh；
• 将body元素高度设为html的100%（即100vh）；
• 让三个容器分别占body高度的20%、60%、20%。

按此逻辑，在1000px视口下，html和body高度应为1000px，容器高度分别为200px、600px、200px，其中.songs-container内容溢出时应显示滚动条。但实际情况是.songs-container超出body高度且未出现滚动条，请问该问题的原因是什么？如何修复？

问题原因 #

1. 百分比高度继承链断裂：.songs-container设置了height:60%，但它的直接父元素是<turbo-frame id="search-and-songs">，这个元素没有设置明确高度，导致百分比高度无法基于父元素计算，只能随内容撑开。
2. 中间层级未传递高度：body设置了100%高度，但子元素<main class="main">默认高度由内容决定，没有继承body的高度，内部容器无法基于body高度计算占比。
3. 容器高度约束错误：search-container和controls-container用了max-height:20%而非height:20%，max-height仅限制最大高度，内容不足时会收缩，无法保证占满20%的比例，导致整体布局高度超出body。

修复方案 #

通过补全高度继承链、使用flex布局确保比例分配，修改后的CSS代码如下：

html {
  height: 100vh;
  background: red;
  margin: 0; /* 移除默认margin，避免不必要的滚动条 */
}

body {
  background: #41403e;
  height: 100%;
  margin: 0; /* 移除body默认margin */
  display: flex;
  flex-direction: column; /* 垂直布局，让main占满剩余高度 */
}

.main {
  height: 100%; /* 继承body的高度 */
  display: flex;
  flex-direction: column; /* 内部容器垂直分配高度 */
}

#search-and-songs {
  flex: 1; /* 占满main除controls-container外的全部高度 */
  display: flex;
  flex-direction: column;
}

.search-container {
  height: 20%; /* 替换max-height为height，强制占比 */
}

.songs-container {
  flex: 1; /* 自动填充剩余高度，等价于60%占比 */
  overflow-y: auto; /* 仅垂直溢出时显示滚动条，体验更友好 */
}

.controls-container {
  height: 20%; /* 替换max-height为height，强制占比 */
}

/* 以下为原有样式，无需修改 */
.song {
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: var(--primary);
}

.current-song {
  background: var(--danger-light-10);
}

.submit-btn--half-block {
  width: 50%;
}

.input-container--block {
  width: 100%;
}

@media(min-width: 600px) {
  .main {
    width: 960px;
    margin: 0 auto;
  }
}

修复关键点说明 #

• 移除html和body的默认margin，避免页面出现不必要的滚动条；
• 使用flex布局给body和main设置垂直方向布局，确保子元素能按比例分配高度；
• 给<turbo-frame>添加flex布局，让内部的search和songs容器正确分配高度；
• 将max-height改为height，强制容器占满指定比例；
• 给.songs-container设置flex:1自动填充剩余高度，同时用overflow-y:auto实现仅垂直溢出时显示滚动条。

页面效果截图 #

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