如何为设置了height:100dvh的元素设置有效最小高度？

场景1：让父容器随内容自适应撑开，同时保证最小高度 #

将父容器的固定高度改为最小高度，用max()函数同时满足"占满视口"和"不低于400px"的要求：

.parent {
  min-height: max(100dvh, 400px);
  /* 保留你的背景图样式，比如：
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
  */
}

这样当子元素总高度小于max(100dvh, 400px)时，父容器保持最小高度；当子元素总高度超过这个值时，父容器会自动被内容撑开，不会出现溢出。

场景2：父容器固定高度（视口/400px），内容超出时内部滚动 #

如果需要父容器始终保持视口高度（最小400px），超出的内容在容器内滚动，只需添加溢出处理：

.parent {
  height: 100dvh;
  min-height: 400px;
  overflow-y: auto;
  /* 背景图样式 */
}

此时视口高度≥400px时，父容器占满视口，内容超出显示滚动条；视口高度<400px时，父容器强制保持400px高度，内容超出同样滚动，避免溢出到容器外。

原设置无效的原因 #

你之前仅设置height:100dvh和min-height:400px，但没处理内容溢出逻辑：

• 当视口高度<400px时，min-height:400px生效，但子元素总高度超过400px时，无溢出处理就会超出容器。
• 固定的height:100dvh会限制父容器高度，无法随子元素自适应撑开，导致内容溢出。

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