双div各占50%响应式高度实现及card组件子元素高度适配问题

一、通用问题：如何实现两个div各占屏幕50%高度并保持响应式？ #

推荐三种可靠实现方案：

1. Flexbox 布局 #

父容器占满视口高度，通过垂直flex布局让子元素自动平分高度：

.parent {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.child {
  flex: 1;
  /* 可选：添加样式区分元素 */
  border: 1px solid #ccc;
}

2. Grid 布局 #

用网格布局直接定义两行各占一半高度：

.parent {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.child {
  border: 1px solid #ccc;
}

3. Calc 计算高度 #

直接通过视口单位计算高度，需配合盒模型避免额外空间：

.child {
  height: calc(50vh);
  box-sizing: border-box;
}

以上方案均能随视口高度自动调整，保持响应式效果。

二、具体场景问题：让card__content占据图片下方剩余空间 #

问题根源 #

代码中card__media设置了position: absolute; top:0; bottom:0，导致它脱离flex布局的文档流，父容器的flex column布局无法感知其高度，因此card__content的flex:1属性无法生效。

解决方案 #

修改关键CSS代码，让card__media回到flex流中，同时保证图片比例正常：

/* 移除card__media的绝对定位，让它回到flex布局流 */
.card__media, .card .media {
  overflow: hidden;
  /* 删除 position: absolute; top:0; bottom:0; */
}

/* 给card__media设置比例容器，维持图片显示比例 */
.card__media {
  position: relative;
  width: 100%;
  padding-bottom: var(--ratio-percent);
}

/* 让图片容器铺满比例容器 */
.card__media .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 确保card__inner的flex布局正常工作 */
.card__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 移除flex:1 1 50%，避免干扰子元素布局 */
}

/* 让card__content自动填充剩余高度 */
.card__content {
  flex: 1;
  /* 删除height:50%，避免限制高度 */
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 1rem;
  width: 100%;
  background-color: #dd6a33;
}

说明 #

• 通过padding-bottom给card__media设置固定比例，图片容器用绝对定位铺满该容器，既保证图片比例正确，又不脱离flex布局流
• card__inner作为flex column容器，card__media会按比例占据空间，card__content的flex:1会自动填充剩余高度

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