如何让网页Footer固定在页面底部？HTML/CSS布局求助

一、HTML结构修正 #

原HTML存在标签嵌套错误（header、footer需放在body内部）与标签拼写错误，修正后的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Azura Tech</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <!-- 顶部导航 -->
  <header>
    Azura Tech
    <img src="img/flowerlogo.png" alt="花型logo" />
    <span>关于我们</span>
    <span>联系我们</span>
    <span class="logo"><img src="img/tiktokwht.png" alt="TikTok图标" /></span>
    <span class="logo"><img src="img/youtubewht.png" alt="YouTube图标" /></span>
  </header>

  <!-- 中间内容区域 -->
  <div class="box">
    <main>
      主内容区
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat et nisi nobis eaque nam, pariatur perspiciatis aut earum eius repellendus error, labore voluptatibus voluptatem placeat ipsum sapiente sequi sed, optio suscipit quo quis laudantium quibusdam!
        Voluptate nam quibusdam eius, corrupti ut voluptatem, facere modi delectus sapiente et dolorum voluptas consequuntur. Quaerat unde dicta soluta assumenda facilis vel inventore molestias architecto. Possimus perspiciatis assumenda placeat accusamus.
        Illo harum iusto maxime consectetur delectus laborum ipsam sapiente repellendus?
      </p>
    </main>
    <!-- 修正拼写错误：Sect → section -->
    <section>
      分区内容
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita corrupti, eligendi totam nemo id quae, reprehenderit fugiat voluptate rem optio dolorem, deserunt blanditiis quod animi molestiae iste repudiandae incidunt similique!
      </p>
    </section>
    <article>
      侧边内容区
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt quas eos provident aspernatur accusantium quos. Omnis minima, quod dolorum sit culpa, iure atque porro quos nesciunt optio provident dolore esse!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non illo perferendis expedita numquam aliquid, itaque labore explicabo neque? Consequatur libero nostrum dolor id nobis facilis ipsum, voluptate esse iusto!
      </p>
    </article>
  </div>

  <!-- 底部版权区 -->
  <footer>
    Azura Tech
    <span>联系我们</span>
    <span>关于我们</span>
    <span>社交媒体</span>
  </footer>
</body>
</html>

二、CSS布局修正（实现Footer固定底部+Header顶置） #

采用Flex布局实现粘性Footer，同时保证背景填充Header与Footer之外的所有空间，修正后的CSS代码：

/* 全局基础重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

img {
  width: 20px;
  height: 20px;
  max-height: 20px;
  max-width: 18px;
}

span {
  float: right;
  margin-top: 6px;
  margin-left: 15px;
  margin-right: 15px;
}

/* Header 固定在顶部，防止滚动时被内容遮挡 */
header {
  padding: 13px;
  background-color: #563f46;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Body 设置为Flex垂直布局，实现内容自动分配空间 */
body {
  color: white;
  font-size: 18px;
  font-weight: 700;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  display: flex;
  flex-direction: column;
  /* 背景填充中间区域 */
  background-image: url("../img/gallerybackground.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 中间内容区占满Header与Footer之外的剩余空间 */
.box {
  flex: 1;
  padding: 20px; /* 可选：添加内边距避免内容贴边 */
}

/* Footer 固定在页面底部 */
footer {
  background-color: #563f46;
  padding: 10px;
  color: black;
}

三、规范文件结构指导 #

推荐采用分层分类的文件结构，便于后续维护：

你的项目文件夹/
├── index.html          # 主HTML文件
├── css/                # CSS样式文件夹
│   └── style.css       # 全局样式文件
└── img/                # 图片资源文件夹
    ├── flowerlogo.png
    ├── gallerybackground.jpg
    ├── tiktokwht.png
    └── youtubewht.png

• 避免所有文件堆在根目录，按资源类型分类存放
• CSS与图片路径需对应调整（如../img/xxx表示返回上一级目录再进入img文件夹）

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