嵌入式Twitter部件响应式布局下与Footer重叠问题求助

我是HTML和CSS新手，正在搭建一个集成第三方iframe与嵌入式Twitter时间线部件的简单网站。在1920x1080分辨率下显示正常，但通过媒体查询实现响应式布局时，Twitter时间线部件与下方Footer等元素出现重叠（并非溢出，而是时间线起始位置与Footer起始位置重合）。附上相关代码及截图说明，恳请帮忙解决！

HTML代码 #

<main>    
  <h1>ESTADO DE RED DE SUBTE</h1>
  <div class="subte-div">
    <div class="tabla">
      <iframe class="frame" height="600" src="https://aplicacioneswp.metrovias.com.ar/estadolineas/desktop.html"></iframe>
    </div>
    <div class="tweets">
      <a class="twitter-timeline" data-lang="es" data-width="280" data-height="500" href="https://twitter.com/basubte?ref_src=twsrc%5Etfw">Tweets by basubte</a> 
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>  
  <footer>
    <p class="footer-text">transporte.capital, 2022</p>
  </footer>
</main>

CSS代码 #

.subte-div {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  height: 600px;
}

.frame {
  border-width: 0px;
  border-style: solid;
  width: 350px;
  padding: 0;
  margin-right: 50px;
  display: flex;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: rgb(208, 206, 206);
}

.footer-text {
  font-size: 10px;
  font-weight: 700;
  padding: 0;
  color: rgb(57, 57, 57);
}

@media (max-width: 700px) {
  header {
    flex-direction: column;
    padding: 0;
  }

  .menu {
    display: flex;
    margin: 0;
    justify-content: space-around;
    width: 90%;
    gap: 5%;
    padding-bottom: 1em;
  }

  .subte-div{
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  
  .tabla, .tweets {
    margin: 0px;
    padding: 0px;
  }

  .footer-text {
    display: none;
  }

  .h1 {
    margin-bottom: 0px;
    padding-bottom: 0;
  }
}

截图说明 #

小屏布局中，Twitter时间线部件的顶部与Footer的顶部重合，两者发生重叠。

问题原因 #

.subte-div设置了固定高度height:600px，大屏时iframe和Twitter时间线并排，总高度不超过600px，显示正常；但小屏切换为垂直排列后，iframe高度600px加上Twitter时间线的500px，总高度远超容器固定高度，容器无法撑开包裹内容，导致Footer向上移动与时间线重叠。

修复步骤 #

1. 移除.subte-div的固定高度
   修改CSS中.subte-div的样式，删除固定高度，让容器根据内部元素高度自适应：

   .subte-div {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
     justify-content: center;
     /* 删除 height:600px */
   }
   

2. 给垂直排列的部件添加间距
   在媒体查询的小屏样式中，给.tabla和.tweets添加底部间距，避免两个部件紧贴：

   @media (max-width: 700px) {
     /* 保留原有样式，新增以下代码 */
     .tabla, .tweets {
       margin-bottom: 20px;
     }
   }
   

3. 可选：优化Twitter时间线的响应式宽度
   如果希望Twitter时间线在小屏时适配宽度，修改HTML中时间线的data-width属性为100%，同时给.tweets添加最大宽度限制：

   <a class="twitter-timeline" data-lang="es" data-width="100%" data-height="500" href="https://twitter.com/basubte?ref_src=twsrc%5Etfw">Tweets by basubte</a>
   

   .tweets {
     width: 100%;
     max-width: 350px; /* 限制最大宽度，避免过宽 */
   }
   

效果说明 #

移除固定高度后，.subte-div会自动撑开以容纳内部所有元素，Footer会自然排列在内容下方，解决重叠问题。添加间距和优化宽度能进一步提升小屏下的视觉体验。

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