我把一个图片放在div中，不知怎么的，它不是body的一部分，因此我的页脚不能在页面的底部，我读到这里，我必须使img的位置绝对化，但它没有改变任何东西。
我只希望页脚在页面的底部。
我试着将图像的位置更改为div内部和div外部，另一个div内部等等，但我的页脚仍然不会到底部。

.flex-container {
  display: flex;
  align-items: center;
}

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

.flex-container img {
  position: absolute;
  max-width: 100%;
  height: auto;
}

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

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

html {
  scroll-behavior: smooth;
}

footer {
  line-height: 100px;
  position: relative;
  background: rgba(28, 32, 36, 1);
  bottom: 0px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: 100px;
  text-align: center;
}

<!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">

  <style>
    body {}
    /*scrollbar utsene lånt ifra w3school. link: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */
    
     ::-webkit-scrollbar {
      width: 10px;
    }
    
     ::-webkit-scrollbar-track {
      background-color: white;
    }
    
     ::-webkit-scrollbar-thumb {
      background-color: lightgray;
    }
    
     ::-webkit-scrollbar-thumb:hover {
      background-color: gray;
    }
  </style>
</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>

  <!--skygen til bilde er tat ifra w3schools https://www.w3schools.com/css/css3_shadows_box.asp-->
  <div class="flex-container">
    <img style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" src="bilder/chair.jpg" alt="Odin" align="right">
    <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>

  <!-- <footer id="bunn">

<p> copyright 2023</p>
</footer> -->

</body>

</html>

2条答案

按热度按时间

rhfm7lfc1#

像这样添加bottom: 0;：

.flex-container img {
  position: absolute;
  bottom: 0; /* Added */
  max-width: 100%;
  height: auto;
}

编辑

当然，这并没有起作用。查看接受的答案，我发现我甚至没有针对页脚。当我回答你的问题时，我查看了代码，.flex-container img是唯一带有position: absolute;的代码。因此，我建议你将bottom: 0;添加到.flex-container img中。
将position: relative;设置为<footer>，无论你做什么都不会将页脚推到底部。因此，将position: absolute;和bottom: 0;设置为footer（！）。同样，将position: relative;设置为父元素。

赞(0）回复(0）举报 2022-12-16

b1zrtrql2#

尝试这代码.不管这内容，这页脚必须保持在这底部

body {
  padding:0;
  margin: 0;
  position: relative;
  min-heigth: 100vh;
}
footer {
  position: absolute;
  background: rgba(28, 32, 36, 1);
  bottom: 0px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

图像不是HTML正文的一部分，因此页脚无法位于底部

2条答案

相关问题

热门标签

最新问答