HTML中图片脱离文档流导致footer无法居底的问题求助

云原生阿岚

2026-8-8

核心问题排查

图片脱离文档流：你给.flex-container img设置了position: absolute，但未给父容器.flex-container添加position: relative，导致图片相对于body定位，既会覆盖下方Footer，又让父容器无法被图片撑开高度。
CSS语法错误：.bakgrundsbilde的background-image URL末尾多了一个分号，会导致背景图加载失败。

修复步骤及代码修改

1. 修正图片定位，让它回到文档流

移除图片的position: absolute，利用Flex布局本身的特性排列图片和文本，同时给图片设置宽度限制避免撑爆容器：

.flex-container img {
  /* 移除position:absolute */
  max-width: 40%; /* 根据需求调整宽度，比如40% */
  height: auto;
}

同时移除HTML中img标签的align="right"，改用Flex布局的justify-content控制排列：

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-around; /* 让图片和文本均匀分布 */
  padding: 20px; /* 可选，添加内边距避免内容贴边 */
}

2. 修复背景图语法错误

去掉background-image URL里的多余分号：

.bakgrundsbilde {
  background-image: url("https://wallpaperaccess.com/full/856733.jpg"); /* 移除末尾分号 */
  height: 675px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

3. 确保Footer始终在页面底部

如果希望Footer在内容不足时也固定在页面底部，给html和body设置Flex布局：

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.flex-container {
  flex: 1; /* 让内容区域自动填充剩余空间 */
}

footer {
  line-height: 100px;
  background: rgba(28, 32, 36, 1);
  width: 100%;
  height: 100px;
  text-align: center;
  /* 移除不必要的position: relative和bottom:0 */
}

完整修改后代码

CSS 代码

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
  flex: 1;
}

.text-box {
  padding-left: 55px;
  font-size: 25px;
  font-family: georgia;
  padding-right: 50px;
  flex: 1;
}

.flex-container img {
  max-width: 40%;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hedding-position {
  padding-left: 10px;
}

.bakgrundsbilde {
  background-image: url("https://wallpaperaccess.com/full/856733.jpg");
  height: 675px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

footer {
  line-height: 100px;
  background: rgba(28, 32, 36, 1);
  width: 100%;
  height: 100px;
  text-align: center;
}

/* 滚动条样式保留 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: white;
}

::-webkit-scrollbar-thumb {
  background-color: lightgray;
}

::-webkit-scrollbar-thumb:hover {
  background-color: gray;
}

HTML 代码

<!DOCTYPE html>
<html lang="no">

<head>
  <title>Min website</title>

  <link rel="stylesheet" href="css/meny.css">
  <link rel="stylesheet" href="css/odin.css">
  <link rel="shortcut icon" type="image/png" href="bilder/favicon.ico">
</head>

<body>
  <!--bakgrundsbildet -->
  <div class="bakgrundsbilde"></div>

  <nav>
    <a href="home.html" style="background-color: lightgray; color: black;"> Hjem</a>
    <a href="profil.html"> Profil</a>
    <a href="faginteresse.html"> Faginteresse</a>
    <a href="fritidsinteresse.html"> Hobby</a>
    <a href="medier.html"> Verk</a>
    <a href="kontakt.html"> Kontakt</a>
    <a style="float:right;" href="#bunn">Til bunnen</a>
  </nav>

  <br>

  <div class="flex-container">
    <img src="bilder/chair.jpg" alt="Odin">
    <div class="text-box">
      <div class="hedding-position">
        <h1 style="font-size: 50px; text-align: center; font-family: garamond;">Hei</h1>
      </div>
      <p>Jeg hetter Odin, jeg er student på informasjonsteknologi og mediaproduksjon. </p>
      <p>Detter er min personlige website som inkludærer min profil, faginteresse, hobbyer, medier og kontakt. </p>
      <p>Jeg bor på Sandnes her i Hadsel.</p>
      <p>Jeg flyttet tilbake etter å ha bodd på Høle i noen år.</p>
    </div>
  </div>

  <br>

  <footer>
    This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.
  </footer>

</body>

</html>

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