CSS设置width:100%的footer未占满全屏的原因及解决方法

问题原因 #

你设置的#content固定宽度为1920px，超过了1366px的屏幕视口宽度，浏览器会自动生成横向滚动条，但width: 100%是相对于父元素的宽度计算的：默认状态下body的宽度等于视口宽度，也就是1366px，没有被更宽的子元素#content撑开，所以#footer的宽度只能到1366px，横向滚动到右侧就会出现空白区域。

解决方法 #

以下方案均不需要修改你现有的HTML结构：

方案1：给body设置最小宽度 #

直接给body设置和#content一致的最小宽度，让body被撑开，#footer的100%宽度就会基于1920px计算，实现满幅效果。

/* 新增body样式 */
body {
  margin: 0; /* 移除浏览器默认的body外边距，避免边缘出现多余留白 */
  min-width: 1920px;
}
#content {
  width: 1920px;
  background-color: blue;
}
#footer {
  width: 100%;
  background-color: pink;
}

方案2：给footer设置固定宽度 #

如果确定#content后续不会调整宽度，直接给#footer也设置1920px的固定宽度即可，逻辑最简单。

#content {
  width: 1920px;
  background-color: blue;
}
#footer {
  width: 1920px;
  background-color: pink;
}

方案3：动态适配内容宽度 #

如果后续#content宽度可能调整，不想写死数值，可以给body设置width: max-content，让body自动适配最宽子元素的宽度，同时加min-width: 100vw保证内容比视口窄时，footer也能占满整个视口。

body {
  margin: 0;
  width: max-content;
  min-width: 100vw;
}
#content {
  width: 1920px;
  background-color: blue;
}
#footer {
  width: 100%;
  background-color: pink;
}

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