非响应式网站100%宽度页脚移动端右侧空白问题求助

问题分析 #

页面中.centrado类使用固定宽度1170px，在移动端屏幕宽度小于这个值时，容器会超出视口范围，导致页面出现横向滚动条。而页脚设置的width: 100%是基于视口宽度计算的，无法覆盖被撑开的整个页面宽度，因此右侧会露出约占屏幕20%的空白区域。另外，页脚同时设置float: left和display: flex属于冗余写法，flex布局会忽略float属性。

解决方案 #

方案1：快速适配页脚（不修改主体容器） #

直接调整页脚的CSS，让它的宽度跟随整个文档流的实际宽度：

.pie_de_sitio{
   /* 移除冗余的float属性 */
   /* float:left;  */
   width: auto; /* 替换为auto，让宽度自适应文档流 */
   min-width: 100%; /* 保证在视口足够宽时仍占满宽度 */
   height:auto;
   display:flex;    
   overflow:hidden; 
   align-items: center; 
   justify-content: center;
   background:#333D4C;
   padding:25px 0; /* 简化padding写法 */
   margin: 50px 0 0 0;  
   bottom: 0;
}

方案2：优化整体响应性（推荐） #

从根源解决页面横向滚动问题，同时让页脚自然适配：

1. 给全局容器添加基础响应式设置：

html, body{
   width: 100%;
   overflow-x: hidden; /* 禁止横向滚动 */
   margin: 0;
   padding: 0;
}

.centrado{
    margin:0 auto;
    width: 1170px;
    max-width: 100%; /* 添加max-width，在小屏幕自动适配 */
    padding: 0 15px; /* 左右添加内边距，避免内容贴边 */
    height:auto;
    display:block;
    overflow:hidden;
}

2. 调整页脚CSS（移除冗余属性）：

.pie_de_sitio{
   /* 移除float:left */
   width: 100%;
   height:auto;
   display:flex;    
   overflow:hidden; 
   align-items: center; 
   justify-content: center;
   background:#333D4C;
   padding:25px 0;
   margin: 50px 0 0 0;  
   bottom: 0;
}

这样修改后，移动端页面不会出现横向滚动，页脚也会完全占满屏幕宽度，同时桌面端的布局不受影响。

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