如何解决HTML自动扩展内容高度与视差页脚的交互问题

你的问题核心在于：main元素的margin-bottom区域（高度与footer一致）虽然没有背景色，但由于main的z-index:1高于footer的z-index:0，这个不可见区域会拦截footer上方的点击事件，导致链接无法触发。以下是两种简单有效的解决方法：

方法一：通过内部容器控制点击区域 #

给main设置pointer-events: none让它不拦截任何点击，再在main内部添加容器，设置pointer-events: auto保证内容区域正常交互：

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
   height: 200px;
   background-color: red;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 500px;
  margin-bottom: 550px;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
  pointer-events: none; /* 禁止main拦截点击 */
}

.main-content {
  pointer-events: auto; /* 允许内容容器响应点击 */
  padding: 1rem; /* 可选，优化内容间距 */
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 550px;
}

对应的HTML修改：

<header>Navigation</header>
<main>
  <div class="main-content">Content - auto grow</div>
</main>
<footer>Footer <a href="#">Link</a></footer>

方法二：用伪元素承载视觉样式（无需修改HTML） #

如果不想新增DOM元素，可将main的背景色和阴影转移到伪元素上，让main本身透明且不拦截点击：

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
   height: 200px;
   background-color: red;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 500px;
  margin-bottom: 550px;
  background: transparent; /* 去掉main自身背景 */
  pointer-events: none; /* 禁止main拦截点击 */
}

/* 用伪元素实现原main的视觉效果 */
main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
  pointer-events: auto; /* 让伪元素响应内容区域的点击 */
  z-index: -1; /* 确保伪元素在main下层，不影响布局 */
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 550px;
}

HTML保持原有结构即可，既保留内容覆盖footer的视差效果，又能让footer的链接正常被点击。

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