CSS布局问题：body高度仅占半页导致footer显示在页面中间

• 修正HTML结构错误：将写在<body>标签外的<header>块移动到<body>内部，放在#main容器的最开头，避免浏览器自动补全结构导致高度计算异常。
• 新增全局样式重置，解决浏览器默认样式干扰：在CSS代码最开头添加如下代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}

• 删除所有冗余高度限制：移除#img-div、#tribute-info、#prior、#pres、#end等元素的max-height: 100vh属性，该属性将容器最大高度卡死在1个视口高度，内容溢出后无法撑开父元素，是布局错乱的核心原因。
• 适配footer固定在页面底部逻辑：调整#main和footer的样式如下：

#main {
  position: relative;
  min-height: 100vh;
  /* 数值根据footer实际高度调整，避免正文内容被footer遮挡 */
  padding-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

• 修复HTML语法错误：将<ul id=y list>修正为合法id格式如<ul id="y-list">，补全所有未闭合的<li>标签，避免语法问题导致渲染异常。

• CSS层面：尽量用类选择器替代id选择器编写样式，id优先级过高不利于后续样式覆盖；将重复样式抽离为公共类，比如你所有内容卡片（#young、#prior等）都有相同的背景、阴影样式，可以抽离为.card公共类统一赋值，大幅减少代码冗余。
• HTML层面：标签要保证完整闭合，避免语法错误导致的渲染异常；可以多用语义化标签，比如时间节点可以用<time>标签包裹，提升代码可读性。
• 布局层面：无特殊需求不要给内容容器加固定最大高度限制，避免内容溢出；图片水平居中不要用margin-left百分比写法，改用margin: 0 auto兼容性更强，适配不同尺寸屏幕不会出现偏移。

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