网页无法占满屏幕宽高且四周有白边，求技术解决方法

你的核心问题是CSS选择器错误：你用了类选择器.html和.body，但实际要设置的是<html>和<body>标签元素，应该使用不带点的元素选择器。另外浏览器默认会给<body>添加margin，这也是白边的来源之一。

修正后的完整CSS代码 #

/* 正确设置html和body元素 */
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 100px;
  background-color: #e4e4e4;
  height: 100vh;
  width: 100vw;
}

[class^='ma'] {
  border: 1px solid black;
  /* 加入box-sizing避免边框撑宽元素 */
  box-sizing: border-box;
}

.navbar {
  background-color: rgba(187, 233, 239, 0.931);
}

.navbar_top {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 55px;
  border: 1px solid black;
  box-sizing: border-box;
}

关键修正点 #

• 将.html改为html，.body改为body，正确选中标签元素
• 给html和body都加上margin:0和padding:0，清除浏览器默认样式
• 给带边框的元素添加box-sizing: border-box，确保边框不会额外占用宽度导致内容溢出
• 给.main加上width:100vw，确保横向占满屏幕

这样修改后，网页就能完全占满屏幕的宽高，四周不会有白边了。

内容的提问来源于stack exchange，提问作者Lost in Symbols