CSS：如何让authorizationHolder__textHolder占满90vh父容器可用空间？

你遇到的问题是.authorizationHolder__textHolder设置height:100%后无法占满父容器的可用剩余空间，核心原因是：百分比高度需要父容器有明确的固定高度（而非min-height），且当前父容器内还有其他元素，100%会以父容器总高度为基准，不会自动扣除其他元素占用的空间。

推荐用Flex布局来解决，这是最灵活且易维护的方案：

修改后的SCSS代码 #

.authorizationHolder {
  width: 60%;
  min-height: 90vh;
  position: relative;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin: 5vh auto;
  box-sizing: border-box;
  padding: {
    top: 50px;
    left: 30px;
    right: 30px;
    bottom: 10px;
  }
  /* 新增：将父容器设为垂直方向的flex布局 */
  display: flex;
  flex-direction: column;
  /* 可选：给子元素之间添加间距，根据需求调整 */
  gap: 20px;

  &__content {
    width: 40%;
    min-width: 300px;
    margin: 0 auto;
  }
  &__textHolder {
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 替换height:100%为flex:1，让元素自动占满剩余空间 */
    flex: 1;
  }
}

方案说明 #

1. 父容器设置display: flex和flex-direction: column后，子元素会垂直排列，形成弹性布局上下文。
2. 给.authorizationHolder__textHolder设置flex:1，它会自动填充父容器中除了registration__titleBlock之外的所有剩余空间，无需依赖百分比高度的限制。
3. 保留父容器的min-height:90vh，确保容器在内容较少时也能保持最小高度，同时在内容较多时自动扩展。

如果一定要用百分比高度的方案（不推荐，灵活性差），可以：

• 将父容器的min-height:90vh改为height:90vh，给父容器一个明确的固定高度。
• 计算.authorizationHolder__textHolder的高度为calc(100% - 标题实际高度)，但需要你提前知道registration__titleBlock的固定高度，一旦标题高度变化，代码需要同步修改。

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