CSS旋转div导致页面水平滚动的溢出问题解决方法

问题根源 #

水平滚动是两个旋转装饰块超出父容器横向边界导致的：

• 原代码给.rotate-white设置了left:100px+宽度100%，.rotate-grey设置了right:100px+宽度100%，两个元素本身宽度已经撑满父容器，再加偏移后必然超出父容器边界
• 元素旋转后，矩形的对角顶点会进一步向外延伸，超出的部分被浏览器计入页面总宽度，就触发了横向滚动条
• 父容器没有设置横向溢出裁剪，超出的部分直接露在页面外层

修复步骤 #

1. 给装饰元素的父级容器加上横向溢出裁剪，只裁掉横向超出的部分，不影响顶部悬浮图片等纵向显示的内容
2. 调整两个旋转色块的定位和宽度：去掉多余的同向左右偏移，把宽度设为略大于100%，避免旋转后色块和页面内容区衔接处出现白边
3. 修正HTML里footer标签的错误自闭合写法，避免DOM结构错乱

修改后的完整CSS代码：

.footer-container {
  background-color: white;
  width: 100%;
  position: relative;
  /* 裁剪横向溢出，不影响纵向元素显示 */
  overflow-x: hidden;
}

.rotate-container {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.rotate-white {
  position: absolute;
  left: -100px;
  top: -40px;
  /* 宽度比容器宽200px，左右各延伸100px，旋转后不会漏白 */
  width: calc(100% + 200px);
  height: 200px;
  transform: rotate(-4deg);
  background-color: red;
  z-index: -1;
}

.rotate-grey {
  top: -40px;
  right: -100px;
  position: absolute;
  width: calc(100% + 200px);
  height: 200px;
  transform: rotate(5deg);
  background-color: #e5e5e5;
  z-index: -2;
}

.footer-top-img {
  width: 290px;
  position: absolute;
  left: 20%;
  right: auto;
  top: -140px;
  z-index: 1;
}

修改后的HTML结构（修正闭合标签错误）：

<footer style="margin-top: 150px;">
  <div class="footer-container px-xl-5 w-100">
    <div class="rotate-container">
      <div class="rotate-white"></div>
      <div class="rotate-grey"></div>
    </div>
    <img class="footer-top-img d-xl-block d-none" src="../global/imgs/footer/footertop.png" />
    <div class="container-fluid footer-content px-xl-5">
      . . .
    </div>
  </div>
</footer>

如果调整后旋转色块边缘仍有漏白，只需要把色块宽度里加的200px数值调大即可，所有超出容器横向范围的部分都会被自动裁剪，不会再触发水平滚动。

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