图像不是 HTML 中正文的一部分，使页脚无法位于底部
[英]Image is not part of the body in HTML and made footer unable to be at the bottom
问题描述
我将图像放在 div 中，但不知何故它不是正文的一部分，因此我的页脚无法位于页面底部。 我在这里读到我必须使 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 个解决方案
解决方案1
3 2022-12-15 12:29:51
添加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; 到页脚（！） 。 另外，设置position: relative; 到父元素。
解决方案2
1 已采纳 2022-12-15 13:20:25
试试这段代码。 无论内容如何，页脚必须保持在底部
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 中为文档底部而不是正文创建页脚
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.