移动端页脚出现白色遮挡块，如何移除该元素？

问题根源分析 #

你的页脚出现白色块的核心原因是内联样式导致的布局冲突：

1. 免责声明的<p>标签硬设置了height:10px，但内容量远超这个高度，移动端宽度收缩后内容溢出，容器高度计算异常，引发白色块。
2. 第二个<div>使用position: relative; top: -200px向上偏移，但其原始占位空间仍保留，导致页脚区域高度被错误拉伸，加剧布局问题。
3. 你之前针对html设置的overflow和max-height没有触及核心布局错误，所以无效。

有效修复方案 #

步骤1：修正HTML内联样式

移除导致布局异常的硬编码样式，让内容自适应容器：

<footer class="w3-center w3-black w3-padding-64">
  <div class="disclaimer-container">
    <!--Disclaimer-->
    <h3 class="w3-center">Heatlh and Safety Disclaimer</h3>
    <p class="w3-center" style="font-size: 11px; color: white; line-height: 1.4;">
      Adults Only: The products available at our store are strictly for adult smokers (21+). You must be of legal smoking age in your region to purchase and use our products.

      Nicotine Warning: Be advised that certain items sold here may contain nicotine, a substance known for its addictive properties. Nicotine is an addictive chemical.
      
      California Proposition 65 Notice: California’s Proposition 65 mandates that we warn our customers that products sold here can expose you to chemicals including nicotine, which is known to the State of California to cause birth defects or other reproductive harm. For more information, please visit the Proposition 65 Warnings Website.
      
      Product Use and Safety: Our products are intended for use by adult smokers. Before using any product, please consult your physician, especially if you have any existing medical conditions.
      
      Ingredients in E-Liquids: E-Liquids available at our store may contain Propylene Glycol and/or Vegetable Glycerin, Nicotine, and Flavorings. Direct oral ingestion of these products can be harmful.
      
      FDA Disclaimer: The Food and Drug Administration has not evaluated the statements regarding these products. Their efficacy has not been confirmed by FDA-approved research. These products are not intended to diagnose, treat, cure, or prevent any disease. This information is not a substitute for professional medical advice.
      
      Safety Precautions: Always keep these products out of reach of children and pets to avoid accidental ingestion or other risks.
      
      Store Policy: We encourage you to review our store's terms and conditions before making a purchase. All products are used at your own risk.
    </p>
  </div>
  <div class="footer-actions">
    <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
    <p>click here for <a href="credits.html" title="Credits" target="_blank" class="w3-hover-text-green">Credits</a></p>
  </div>
</footer>

步骤2：添加移动端适配CSS

用CSS调整页脚内元素的间距，避免布局挤压：

/* 移动端适配 */
@media only screen and (max-width: 768px) {
  .disclaimer-container {
    margin-top: 20px; /* 替换原来的margin-top:100px，避免移动端上方留白过大 */
    margin-bottom: 30px; /* 给底部操作区留出足够间距 */
  }
  
  .footer-actions {
    text-align: center;
  }
  
  /* 确保页脚内容不会溢出视口 */
  footer {
    overflow: hidden;
    box-sizing: border-box;
  }
}

额外优化建议 #

• 把内联样式全部移到外部CSS文件中，便于维护和修改。
• 如果需要限制免责声明的高度，可以给.disclaimer-container p设置max-height并配合滚动：

.disclaimer-container p {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px; /* 避免滚动条遮挡文字 */
}

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