如何在不固定位置的情况下将文本放置在页面的最底部？ [复制]答案

【问题标题】：How to place the text at the very bottom of the page without getting position fixed? [duplicate]如何在不固定位置的情况下将文本放置在页面的最底部？ [复制]
【发布时间】：2021-07-10 06:31:39
【问题描述】：

这对某些人来说可能是一个非常重要的问题，但由于某种原因，我找不到将文本放在页面最底部的方法。如果我将位置设置为“固定”，我可以将文本放置在底部，但我只是试图将文本放置在页面底部，以便用户在滚动到时能够看到文本最底层。

这是我针对这个特定问题的当前代码。由于这是我页面的最底部，我只复制了有问题的相关源代码。

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

【问题讨论】：

标签： html css position bottom

【解决方案1】：

这是你想要的吗？

#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>

【讨论】：

【解决方案2】：

如果footer-paragraph元素的位置是absolute，并且它的所有父元素都有一个默认位置值（static），则footer-paragraph元素被调整为body标签。

#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 是您想要的代码 sn-p。

【讨论】：

【解决方案3】：

您可以尝试为页脚设置一个单独的块，如下所示，以便根据正文进行调整：

#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>

【讨论】：