技术问题：如何让顶部Banner与主内容动态适配避免窗口缩小时重叠？

这问题我太熟悉了！你当前的核心问题是给#banner设置了position: absolute，让它脱离了正常的文档流——主内容#main-content根本感知不到banner的实际高度，所以固定的padding-top: 110px在窗口缩小、banner因为内容换行而高度增加时，就会失效导致重叠。下面给你几个实用的解决思路：

方案一：移除绝对定位（最简单直接） #

如果不需要banner固定在顶部跟随滚动，直接去掉position: absolute，让元素回到正常文档流，主内容会自动紧跟在banner下方，完全不需要手动设置间距：

* { margin: 0; padding: 0; }
div#banner { 
  /* 移除position:absolute */
  top: 0; left: 0; 
  background-color: #b4ecb4; 
  width: 100%; 
  overflow-x: hidden; 
}
div#banner-content { 
  width: 100%; 
  margin: 0 auto; 
  padding: 10px; 
  border: 0px solid #000; 
}
div#main-content { 
  /* 可以去掉固定的padding-top */
  /* padding-top: 110px; */
}

方案二：使用Flex布局（现代灵活方案） #

如果需要更可控的页面布局，给body设置Flex垂直排列，这样banner会占据自身所需高度，主内容自动填充剩余空间，彻底避免重叠：

* { margin: 0; padding: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保页面占满视口高度 */
}
div#banner { 
  background-color: #b4ecb4; 
  width: 100%; 
  overflow-x: hidden; 
}
div#banner-content { 
  width: 100%; 
  margin: 0 auto; 
  padding: 10px; 
  border: 0px solid #000; 
}
div#main-content { 
  flex: 1; /* 让主内容占据剩余空间 */
  /* 这里可以加一点顶部内边距美化，不是必须 */
  padding-top: 20px; 
}

方案三：保留绝对定位，用JS动态计算高度（适合必须固定banner的场景） #

如果你需要banner固定在顶部（比如滚动时不消失），那只能用JS实时监听窗口大小变化，动态设置主内容的顶部间距：

* { margin: 0; padding: 0; }
div#banner { 
  position: fixed; /* 用fixed代替absolute，实现固定顶部 */
  top: 0; left: 0; 
  background-color: #b4ecb4; 
  width: 100%; 
  overflow-x: hidden; 
}
div#banner-content { 
  width: 100%; 
  margin: 0 auto; 
  padding: 10px; 
  border: 0px solid #000; 
}
div#main-content { 
  /* 初始值可以设置为banner默认高度 */
  padding-top: 110px; 
}

// 定义计算间距的函数
function setMainContentPadding() {
  const bannerHeight = document.getElementById('banner').offsetHeight;
  document.getElementById('main-content').style.paddingTop = `${bannerHeight}px`;
}

// 页面加载时执行一次
window.addEventListener('load', setMainContentPadding);
// 窗口大小变化时重新计算
window.addEventListener('resize', setMainContentPadding);

这样不管banner高度怎么变，主内容的顶部间距都会自动适配啦！

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