为何添加个人图片后页面底部出现大量空白？求解决办法

核心问题原因 #

你设置的main img的height: 10%无效——因为父元素<main>没有明确的高度值，浏览器会忽略这个百分比设置，直接使用图片的原始尺寸渲染。如果你的self.JPG原始尺寸很大，就会把<main>区域撑得过高，导致页面底部出现大量空白。

具体修复步骤 #

1. 修正图片的高度设置

将main img的height: 10%替换为具体的像素值或视口单位，同时保持图片的宽高比：

main img {
  border-radius: 100px;
  /* 用具体像素值控制高度，同时自动适配宽度 */
  height: 150px;
  width: auto;
  padding-top: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* 可选：限制最大高度，避免图片过大 */
  max-height: 200px;
}

2. 优化Grid容器的高度（可选，解决footer位置问题）

给.grid添加min-height: 100vh，确保页面至少占满整个视口高度，同时内容过多时自动延伸：

.grid {
  display: grid;
  grid-template-rows: 50px 200px 1fr 3em;
  grid-template-columns: 1fr;
  grid-template-areas: "nav " " banner" " main" " footer";
  min-height: 100vh; /* 添加这一行 */
}

额外建议 #

• 提前压缩你的self.JPG图片，减少文件体积的同时避免原始尺寸过大带来的渲染问题。
• 如果你希望图片高度随屏幕尺寸自适应，可以用vh单位（比如height: 20vh），表示占视口高度的20%。

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