How can I position an element at the bottom of the page?
Question
I'm working on my portfolio website and I'm not that good with CSS as of now this social bar is coming like this in between and I want it to go down like the bottom of the page
const menuToggle = document.querySelector('.toggle'); const showcase = document.querySelector('.showcase'); menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); showcase.classList.toggle('active'); })
.social { /* //position my socials to bottom left */ position: absolute; scale: 0.09; bottom: 0; left: 0; margin-top: 100%; margin-left: 40px; width: 0%; display: flex; justify-content: space-between; align-items: center; z-index: 1; }.social li { list-style: none; }.social li a { display: inline-block; margin-left: 40px; filter: invert(1); transform: scale(0.5); transition: 0.5s; }.social li a:hover { transform: scale(0.65) translateY(-15px); }
<body> <section class="showcase"> <header> <h2 class="logo"> <a href="#home"></a>EAzZY/Madhur</h2> <div class="toggle"></div> </header> <video src="pexels-rostislav-uzunov-7513671.mp4" muted loop autoplay></video> <div class="overlay"></div> <div class="text"> <h2> I am Madhur</h2> </div> <ul class="social"> <li> <a href="https://twitter.com/XEAzZYX"><img src="https://via.placeholder.com/48"></a> </li> <li> <a href="https://www.instagram.com/eazzy_kkl/"><img src="https://via.placeholder.com/48"></a> </li> <li> <a href="https://www.linkedin.com/in/madhur-mittal09/"><img src="https://via.placeholder.com/48"></a> </li> <li> <a href="https://steamcommunity.com/id/EAzZYatGO"><img src="https://via.placeholder.com/48"></a> </li> <li> <a href="https://github.com/EAzZY-1wnL"><img src="https://via.placeholder.com/48"></a> </li> </ul> </section> <div class="menu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <section id="home"></section> <section id="about"> <h1>about</h1> </section> <section id="contact"> <h1>contact</h1> </section> </body>
4 answers
solution1
0 ACCPTED 2022-08-30 13:15:03
So without seeing your html I don't know how exactly where your social media bar is. I see you are using absolute positioning which can get goofy if the parent container it is in is not 100% height of the window. Which may be happening here. See my example below. If you want it to sit at the bottom of the screen and the screen does not scroll you will have to make the parent container the height of the screen.
.full-height { width:100%; height: 100vh; background-color: black; overflow-x: hidden; position: relative; }.social { width: 200px; height: 50px; background-color: blue; position: absolute; bottom: 20px; left: 20px; }
<div class="full-height"> <ul class="social"> </ul> <div>
solution2
0 2022-08-30 13:39:19
It would be better to have your html code as well. But assuming the situation, I guess it might be like this:
<div class="container">
<ul class="social">
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
</ul>
</div>
Your CSS code which works, adjust it like this
/* Your container should have position relative and a height of the viewport */
.container {
position: relative;
border: 1px solid red;
height: 15rem;
}
.social {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
color : #fff;
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
solution3
0 2022-08-30 13:42:24
to do that you can use absolute positioning. we set our chosen element position to absolute and its container position to relative. so you choose body as its container and set position for body to relative.
solution4
0 2022-08-30 13:47:06
You can change the position of social class to fixed instead of absolute.
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.