HTML添加元素时网站出现额外空白的原因排查求助

问题根源 #

页面空白的核心原因有两个：

1. 网格容器grid-container设置了grid-template-rows: repeat(5, 1fr)，强制给每行分配均等的固定空间，当内容（长文本、图片）高度超过该行的1fr配额时，布局会直接错位，产生多余空白。
2. .main里的float: left完全多余，网格布局本身已经能精准控制元素位置，浮动属性会干扰网格的正常渲染逻辑。

修复步骤 #

1. 删除多余浮动属性：直接移除.main中的float: left。
2. 调整网格行高规则：把grid-container的grid-template-rows改成自适应内容的配置，让行高随内容自动伸缩。

修改后的完整CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  grid-area: 1 / 1 / 2 / 6;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  height: fit-content;
  padding: 25px 0;
  border-bottom: solid white 2px;
}

.menu {
  grid-area: 2 / 1 / 3 / 6;
  background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
  height: fit-content;
  padding: 20px 0;
}

ul {
  list-style-type: none;
  text-decoration: none;
  width: 100%;
  text-align: center;
}

.menu li {
  padding-left: 30px;
  padding-right: 30px;
}

li {
  display: inline;
}

ul li a {
  color: white;
  text-decoration: none;
  font-size: 24px;
}

ul li a:hover {
  text-decoration: underline;
}

.side {
  grid-area: 3 / 1 / 5 / 2;
}

.main {
  grid-area: 3 / 2 / 5 / 6;
  display: flex;
  justify-content: left;
}

.side,
.main {
  padding: 10px;
}

.footer {
  grid-area: 5 / 1 / 6 / 6;
  display: flex;
  justify-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 100vh; /* 可选：让页面占满视口，footer固定在底部 */
}

关键修改说明 #

• grid-template-rows: auto auto 1fr auto：前两行（header、菜单）自适应内容高度，中间行（侧边栏+主内容）占据剩余空间，最后一行（页脚）自适应高度，完全适配内容变化。
• 移除float: left：消除网格布局与浮动属性的冲突，避免内容溢出或错位。
• 可选的min-height: 100vh：确保页面在内容较少时也能占满整个屏幕，页脚不会跑到页面中间。

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