[分享]css元素撑满全屏设置背景色

CSS是现代网页设计过程中必不可少的一部分，可以为网站提供更加美观、优雅、易于维护和可访问性强的效果。其中，设置背景色是一个常见的需求，而将背景色填满全屏则是更为实用的需求。body { backgr...

CSS是现代网页设计过程中必不可少的一部分，可以为网站提供更加美观、优雅、易于维护和可访问性强的效果。其中，设置背景色是一个常见的需求，而将背景色填满全屏则是更为实用的需求。

body {
  background-color: #f5f5f5; /* 设置默认背景色 */
}
.full-screen {
  background-color: #2ecc71; /* 设置背景颜色 */
  height: 100vh; /* 充满整个视口高度 */
  width: 100vw; /* 充满整个视口宽度 */
} 

如上所示，通过在CSS中为要充满全屏的元素设置高度100vh（视口高度）和宽度100vw（视口宽度），元素将正好充满整个屏幕。此外，我们还可以设置要显示的背景颜色，如代码中所示的使用#2ecc71这个颜色，用你自己喜欢的颜色。

除了上述实现方式外，我们还可以使用relative和absolute定位，把元素移至屏幕左上角，再扩展它们以覆盖整个视图窗口。

.full-screen {
  background-color: #3498db; /* 设置背景颜色 */
  position: absolute; /* 绝对位置 */
  top: 0; /* 顶部 */
  left: 0; /* 左侧 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
} 

如上所示，我们使用了position: absolute来将元素置于屏幕顶部和左侧。然后，通过将元素的宽度和高度设置为100%，选择扩展整个视图窗口的尺寸，以便整个元素空间都变为背景色。

总之，在CSS中撑满全屏设置背景色是非常方便的，在实现中你可以根据需求，选择不同的方法来设置，以帮助你更好地达到自己想要的效果。