如何设置div宽度为屏幕全屏？解决.container无法占满父元素宽度问题

看起来你的.container没铺满屏幕，主要是两个浏览器默认样式的“坑”在搞鬼，我给你拆解一下：

问题根源 #

1. 浏览器默认的body边距：大多数浏览器会给<body>元素默认设置margin: 8px，这就导致你的.container虽然设了width: 100%，但其实是相对于body的内容宽度（屏幕宽度减去左右各8px的margin），所以看起来窄且居中。
2. 高度继承失效：你给.container设了height: 100%，但它的父元素（body和html）默认没有明确的高度值，这个100%就没有可继承的基准，容器高度自然不会撑满屏幕。

修复方案 #

只需要给html和body添加重置样式，再保留你原本的.container样式即可：

/* 重置html和body的默认样式，解决边距和高度继承问题 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 你的.container原有样式可以直接保留 */
.container {
  background: url("https://image.ibb.co/e7L09w/rsz_pexels_photo_540518.png") no-repeat fixed center bottom;
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 120px 1fr 150px;
  border: 2px solid yellow;
  width: 100%;
  height: 100%;
}

为什么这样有效？ #

• 去掉body的margin后，body的宽度就完全等于屏幕宽度，.container的width: 100%自然就能铺满整个屏幕。
• 给html和body设置height: 100%，让它们的高度继承自浏览器视口，这样.container的height: 100%就有了明确的继承基准，从而撑满整个屏幕高度。

如果之后还是有异常，可以检查是否有其他父元素给.container设置了max-width或padding，不过从你提供的代码来看，上面的修复应该就能解决问题啦。

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