个人网页笔记本端页脚遮挡按钮问题求助

• 页面的核心内容区块.center用了绝对定位相对于视口垂直居中，同时footer也用绝对定位固定在视口底部，当笔记本屏幕高度小于「导航栏高度 + 核心内容总高度 + 页脚高度」时，核心内容底部的按钮就会被固定在底部的页脚覆盖。外接显示器屏幕高度更高，不会触发高度阈值，因此没有遮挡问题。
• 你添加的html{overflow-y: scroll;}无效是因为绝对定位元素脱离正常文档流，页面整体高度没有被内容撑开，滚动条没有可滚动的空间。

我们改用Flex布局实现粘性页脚效果，既保证页脚在内容不足时贴在页面底部，内容超过视口高度时跟着内容往下走，不会遮挡上层内容：

1. 首先设置页面基础布局属性，在CSS中添加以下规则：

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

2. 替换.center区块原有的定位样式，删除原有position: absolute;、top: 50%;、left: 50%;、transform: translate(-50%, -50%);规则，替换为以下样式：

.wrapper .center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  user-select: none;
  padding-bottom: 40px;
}

3. 调整内容元素的适配规则，避免小屏溢出：

/* 删除h1、h2原有固定宽度设置，替换为最大宽度限制 */
.center h1, .center h2 {
  width: 100%;
  max-width: 900px;
  text-align: center;
}
/* 删除buttons原有左右固定边距，改为上下边距 */
.center .buttons {
  margin: 35px 0 0 0;
}

4. 移除页脚的绝对定位规则，删除footer原有position: absolute;、bottom: 0px;属性，保留其他原有样式即可。

可以添加媒体查询规则，在小屏设备上自动缩小标题字号，避免内容溢出：

@media (max-width: 768px) {
  .center h1, .center h2 {
    font-size: 36px;
  }
  .navbar ul li a {
    font-size: 16px;
    padding: 2px 4px;
  }
}

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