html - How to place the text at the very bottom of the page without getting position fixed?

-1
votes

This might be a very question to some, but for some reason I cannot find a way to place the text at the very bottom of the page. If I place the position as 'fixed', I am able to place the text at the bottom, but I am simply trying to place the text at the bottom of the page so that the user will be able to see the text when scrolling to the very bottom.

enter image description here

This is the current code I have for this particular problem. As this is the very bottom of my page, I have only copied the relevant source codes that has the issue.

HTML

<div id = "next">
        <div id = "opportunities">
            <h5>I am looking for opportunities in software development area from January 2022 onwards.
            My inbox is always open. Whether you have a question or just want to say hi, I will get back to you as soon
            as possible!
            </h5>
            
            <p id = "footer-paragraph">Designed & Built by ABCD</p>
        </div>
    </div>

CSS

#next {
    width: 100%;
    margin: 300px auto;
    margin-left: -30px;
    padding: 20px;
    margin: 0;
}

#opportunities h5 {
    text-align: center;
    margin-top: 15px;
}

#opportunities {
    position: relative;
}

#footer-paragraph {
    height: 50px;
    text-align: center;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}
3
htmlcsspositionbottom

3 Answers

1
votes

If the position of footer-paragraph element is absolute and all its parents have a default position value(static), the footer-paragraph element is adjusted to the body tag.

#next {
    width: 100%;
    margin: 300px auto;
    margin-left: -30px;
    padding: 20px;
    margin: 0;
}

#opportunities h5 {
    text-align: center;
    margin-top: 15px;
}

#opportunities {
    position: static;
}

#footer-paragraph {
    width: 100%;
    position: absolute;
    height: 50px;
    text-align: center;
    bottom: 0px;
    margin: 0 auto;
}

This is your desired code snippet.

2
votes

is this what you want?

#next {
     width: 100%;
}

#opportunities h5 {
    text-align: center;
    margin-top: 15px;
}

#footer-paragraph {
    
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}
<div id = "next">
      <div id = "opportunities">
          <h5>I am looking for opportunities in software development area from January     2022 onwards.
                My inbox is always open. Whether you have a question or just want to say hi, I will get back to you as soon
                as possible!
          </h5>
          <p id = "footer-paragraph">Designed & Built by ABCD</p>
      </div>
</div>
1
votes

You can try to have a separate block for footer like below, so that it will be adjusted with respect to body:

#next {
    width: 100%;
    margin: 300px auto;
    margin-left: -30px;
    padding: 20px;
    margin: 0;
}

#opportunities h5 {
    text-align: center;
    margin-top: 15px;
}

#opportunities {
    position: relative;
}

#footer-paragraph {
    height: 50px;
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}
   <div id = "next">
        <div id = "opportunities">
            <h5>I am looking for opportunities in software development area from January 2022 onwards.
            My inbox is always open. Whether you have a question or just want to say hi, I will get back to you as soon
            as possible!
            </h5>
        </div>
    </div>
<div id = "footer-paragraph">Designed & Built by ABCD</div>