使用Bootstrap开发时小屏设备下div内容被后续div重叠如何解决

问题根因 #

• 你给#projects、#contact容器都加了vh-100类，该类强制容器高度等于当前视口高度，小屏幕下卡片换行后总高度超过100vh时，内容会溢出容器，不会撑开容器高度，自然就会被下方的容器重叠。
• 底部的SVG使用了绝对定位，属于脱离文档流的元素，容器计算高度时不会把SVG的高度纳入统计，进一步加重了内容溢出的问题。
• #cards设置了z-index:2但没有加定位属性，该z-index配置不生效，可能出现卡片内容被SVG遮挡的问题。

解决方案 #

步骤1：替换固定高度为最小高度 #

把两个容器的vh-100类替换为Bootstrap自带的min-vh-100类，容器高度不足100vh时默认占满视口，内容超过时会自动撑开，不会固定死高度：

<!-- 修改前 -->
<div class="container-fluid  vh-100 " id="projects">
<div class="container-fluid  w-100 vh-100 my-auto  d-flex justify-content-center align-items-center " id="contact">

<!-- 修改后 -->
<div class="container-fluid min-vh-100 " id="projects">
<div class="container-fluid w-100 min-vh-100 my-auto d-flex justify-content-center align-items-center " id="contact">

步骤2：给容器添加底部内边距 #

因为底部SVG是绝对定位不占文档流高度，需要给容器加底部内边距预留SVG的显示位置，避免内容被SVG遮挡、同时不会溢出到下一个容器，你的SVG viewBox高度是320，可按需求调整数值：

#projects, #contact {
  /* 预留SVG高度 */
  padding-bottom: 320px;
}
#cards {
  /* 给cards加相对定位让z-index生效 */
  position: relative;
}

修改完成后小屏幕下容器会随内容自动撑开，不会出现重叠问题。

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