Image is not part of the body in HTML and made footer unable to be at the bottom
Question
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. I read in here that i must make img position absolute, but it didn't change anything.
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.
.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 answers
solution1
3 2022-12-15 12:29:51
Add 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; . Consequently, I suggested that you add bottom: 0; to the .flex-container img .
You set position: relative; to the <footer> which will not push the footer to the bottom no matter what you do. So, set position: absolute; and bottom: 0; to the footer(!) . Also, set position: relative; to the parent element.
solution2
1 ACCPTED 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.