使用display:none控制div显隐时footer与内容重叠问题如何解决

数据老陈

2026-10-6

问题根因

布局异常核心是.two设置了position: absolute，绝对定位元素会脱离正常文档流，父容器.container的高度计算不会包含绝对定位元素的高度：

显示.one时，.one是正常流元素，能撑高父容器，布局正常
隐藏.one后，父容器里没有正常流元素撑高度，直接塌陷，下方footer自然就向上偏移和.two的内容重叠

修复方案

两个子容器都走正常文档流，统一用display属性控制显隐即可，具体修改如下：

1. CSS修改

删除.two的绝对定位相关属性，默认设置为隐藏，同时删除.container不需要的相对定位配置：

.container {
  margin-top: 50px;
  height: auto;
  padding-bottom: 50px;
}

/* 替换原有的.two样式 */
.two {
  width: 100%;
  display: none; /* 默认隐藏 */
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  height: auto;
}

2. JS逻辑修改

将原来的opacity控制改成display控制：

var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');

bt2.click(function(){
    cont_all.css('display', 'none');
    cont_curses.css('display', 'flex');
});
bt1.click(function(){
   cont_curses.css('display', 'none');
   cont_all.css('display', 'flex');
});