CSS背景色无法延伸至页面底部的原因咨询

你的黑色（.backgroundMAIN）和红色（.main）背景无法覆盖底部"Links Favoritos"区域，核心原因是固定高度限制了容器的自适应扩展，再加上不必要的行内块设置：

问题原因 #

1. height:100%的局限性
   你给html、body、.backgroundMAIN、.main都设置了height:100%，这个属性会让元素高度固定为父元素的高度（这里父元素高度等于浏览器视口高度）。当页面内容总高度超过视口时，容器不会自动拉长，导致背景只能覆盖到视口底部，超出的内容就脱离了背景范围。

2. display:inline-block的干扰
   .backgroundMAIN和.main设置了display:inline-block，这个属性让元素表现为行内块级元素，不仅没必要，还会让容器更难自适应内容高度，甚至可能产生额外间距。

修复步骤 #

只需要修改几处CSS即可解决：

1. 取消html/body的固定高度 #

删掉html, body中的height:100%，让它们自动根据内容高度调整：

html,
body {
  margin: 0;
  /* 移除 height:100%; */
  width: 100%;
}

2. 用min-height:100vh替代固定高度 #

把.backgroundMAIN和.main的height:100%改成min-height:100vh（100vh表示占满整个视口高度），这样容器至少会铺满视口，当内容超出时会自动向下延伸：

.backgroundMAIN {
  background-color: black;
  min-height: 100vh; /* 替换 height:100%; */
  width: 100%;
  /* 移除 display:inline-block; */
}

.main {
  background-color: red;
  min-height: 100vh; /* 替换 height:100%; */
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  overflow-wrap: break-word;
  /* 移除 display:inline-block; */
}

修改完成后，背景会自动延伸到页面最底部，完全覆盖所有内容区域。

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