HTML/CSS中Div铺满页面及固定链接至页面底部的问题求助

方案一：自适应底部（内容不足时贴视口底，内容溢出时随页面滚动） #

这是最推荐的响应式方案，完美适配手机和电脑端，核心是利用Flex布局的自动间距特性：

• 给外层容器（比如<body>或自定义的包裹div）设置最小高度为视口高度，同时开启垂直方向的Flex布局：

.wrapper {
  min-height: 100vh; /* 确保容器至少占满整个屏幕高度 */
  display: flex;
  flex-direction: column; /* 子元素从上到下垂直排列 */
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
  padding: 0;
}

• 将需要固定的链接放在容器的最后位置，给它添加margin-top: auto，这个属性会自动把链接推到容器底部，不管上面内容的高度：

.bottom-link {
  margin-top: auto;
  /* 可自定义样式：比如 padding: 12px 0; background-color: #f0f0f0; */
}

这个方案的优势是：当页面内容较少时，链接牢牢贴在视口底部；当内容超过屏幕高度时，链接会跟随页面滚动到实际内容的最底部，不会遮挡内容。

方案二：固定悬浮在视口底部（始终显示在屏幕底部，不随页面滚动） #

如果需要链接一直固定在屏幕底部，不随页面滚动而移动，可以使用固定定位：

.bottom-link {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* 可选，让链接占满屏幕宽度 */
  padding: 12px;
  background-color: #ffffff; /* 添加背景色避免被页面内容遮挡 */
}

注意：使用这个方案时，需要给页面的主内容区域添加底部内边距（padding-bottom），值等于链接的高度，防止页面底部内容被固定链接挡住。

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