图像不是 HTML 中正文的一部分，使页脚无法位于底部
[英]Image is not part of the body in HTML and made footer unable to be at the bottom
问题描述
I put an image in a div and somehow it's not part of the body thus made my footer unable to be at the bottom of the page.
我将图像放在 div 中，但不知何故它不是正文的一部分，因此我的页脚无法位于页面底部。 I read in here that i must make img position absolute, but it didn't change anything.我在这里读到我必须使 img 位置绝对，但它没有改变任何东西。
I just want my footer to be at the bottom of the page.我只希望我的页脚位于页面底部。
I tried to change the position of the image to be inside div and outside div, inside another div and so on, but still my footer wont go to the bottom.我试图将图像的位置更改为在 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
Add bottom: 0;添加bottom: 0; like this:像这样：
.flex-container img {
position: absolute;
bottom: 0; /* Added */
max-width: 100%;
height: auto;
}
EDIT编辑
Of course, that didn't work.当然，那是行不通的。 Looking at the accepted answer, I see that I wasn't even targeting the footer.查看已接受的答案，我发现我什至没有针对页脚。 When I was answering your question, I looked at the code and .flex-container img was the only one with position: absolute;当我回答你的问题时，我查看了代码， .flex-container img是唯一一个position: absolute; . . Consequently, I suggested that you add bottom: 0;因此，我建议您添加bottom: 0; to the .flex-container img .到.flex-container img 。
You set position: relative;你设置position: relative; to the <footer> which will not push the footer to the bottom no matter what you do.到<footer> ，无论您做什么，它都不会将页脚推到底部。 So, set position: absolute;所以，设置position: absolute; and bottom: 0; bottom: 0; to the footer(!) .到页脚（！） 。 Also, set position: relative;另外，设置position: relative; to the parent element.到父元素。
解决方案2
1 已采纳 2022-12-15 13:20:25
try this code.试试这段代码。 regardless of the content, the footer must remain at the bottom无论内容如何，页脚必须保持在底部
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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.