技术求助：Footer无法固定在屏幕底部的适配方案

针对你遇到的Footer无法稳定固定在底部的问题，以下是几种可靠的实现方案，适配所有视口尺寸：

方案1：Flexbox布局（推荐，简洁易维护） #

这是目前最常用的实现方式，无需计算高度，自动适配内容长短：

1. 调整页面整体结构，确保内容区（除Footer外的所有内容）被一个容器包裹（比如<main>标签）：

<body>
  <main class="content">
    <!-- 你的页面内容 -->
  </main>
  <footer id="footer">
    <p id="footer-text">Lorem ipsum dolor sit amet consectetur.</p>
    <div id="credits">
      <p>
        Credits:
        <br />
        Valdemar - Projektledare
        <br />
        Sidney - King kong
        <br />
        Vincent - King hemsida
        <br />
        Adam - nä
      </p>
    </div>
  </footer>
</body>

2. 修改全局和Footer的CSS：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距 */
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1; /* 让内容区占据剩余空间，Footer自动被推到底部 */
}

#footer {
  width: 100%;
  padding: 2rem 0 6rem; /* 统一上下内边距，替换单独的margin-top */
  background-color: #727365;
  text-align: center;
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
}

方案2：Grid布局（现代浏览器友好） #

实现逻辑和Flexbox类似，代码更简洁：

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占满剩余空间，第二行自适应Footer高度 */
}

#footer {
  width: 100%;
  padding: 2rem 0 6rem;
  background-color: #727365;
  text-align: center;
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
}

结构上同样需要确保内容区在单独的容器中，让Grid直接作用于body的子元素即可。

方案3：传统绝对定位方案（兼容旧浏览器） #

如果需要兼容不支持Flex/Grid的旧浏览器，可以用这种方式：

html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  padding-bottom: 10rem; /* 值等于Footer的总高度（自身高度+上下内边距），防止内容被Footer遮挡 */
  box-sizing: border-box;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem 0 6rem;
  background-color: #727365;
  text-align: center;
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
}

注意：需要提前计算Footer的总高度，确保padding-bottom的值足够，避免内容被Footer覆盖。

以上三种方案都能实现：当页面内容较短时，Footer固定在屏幕底部；当内容超过视口高度时，Footer跟随内容到页面底部，完全适配任意视口尺寸。

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