height overflow失效内容显示异常，求响应式动态高度最简方案

AI 小北

2026-8-3

最简解决方案：实现.content响应式动态高度

核心修改点：

将.content的布局改为flex，替代float实现左右分栏，解决父元素高度塌陷问题，让容器自动适配内容高度
把.content的固定height:520px替换为min-height:520px，既保留最小高度限制，又能在内容过多时自动撑开容器
移除.leftimg和.righttext中的top:50%、transform: translateY(-50%)，改用flex的align-items:center实现垂直居中，避免内容偏移遮挡
保留overflow:auto在需要的场景（比如小屏），防止内容溢出

修改后的完整CSS代码：

.righttext{
  width: 50%;
  padding: 1em;
  font-family: teko;
  text-align: center;
  border-left:2px dashed #ffffff;
  /* 移除原垂直居中的top和transform */
}

.leftimg{
  width: 43%;
  padding: 1em;
  border: 1px solid red;
  display: flex;
  align-items: center; /* 内部图片垂直居中 */
  /* 移除原垂直居中的top和transform */
}

.desc{
  font-size: 1.5em;
}

.topic{
  font-size: 3em;
}

.content{
  position: relative;
  display: flex; /* 改为flex布局 */
  align-items: center; /* 子元素垂直居中 */
  background-color: #76C9F0; 
  min-height:520px; /* 替换固定height为min-height */
  border-radius: 0px 0px 20px 20px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto; /* 需要时添加，避免内容溢出 */
}

@media (max-width: 480px) {
 .content{
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  flex-direction: column; /* 小屏下改为垂直布局 */
}
 .leftimg{
  display:none !important;
}

.righttext{
  width: 90% !important;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 2px dashed white;
  border-left: none !important;
}
 }