-1

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

在此处输入图像描述

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

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

3 回答 3

2

这是你想要的吗？

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

于 2021-07-10T06:44:52.053 回答
1

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

这是您想要的代码片段。

于 2021-07-10T06:43:31.613 回答
1

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

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

于 2021-07-10T06:44:34.263 回答