How can I position an element at the bottom of the page?-CodePudding

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

HTML and CSS I'm using: https://codepen.io/helpme00000/pen/gOeVeeZ

.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);
}

enter image description here

CodePudding user response：

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 >
 <ul >
 </ul>
<div>

CodePudding user response：

It would be better to have your html code as well. But assuming the situation, I guess it might be like this:

    <div >
      <ul >
        <li>
          <a href="#">
            <i ></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i ></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i ></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i ></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);
}

CodePudding user response：

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.

CodePudding user response：

You can change the position of social class to fixed instead of absolute.