如何在页面底部设置 div [重复]答案

【问题标题】：how to set a div in bottom of page [duplicate]如何在页面底部设置 div [重复]
【发布时间】：2021-01-08 17:49:28
【问题描述】：

我真的不知道如何在页面底部设置一个div。

我的代码是这样的：

<footer>
  <div>
    <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
    &nbsp;
    <a href="https://github.com/achyutap"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
    &nbsp;
    <a href="mailto:amp@gmail.com"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
  </div>
</footer>

我试过<footer>。

【问题讨论】：

希望对你有帮助check it here
您需要使用 CSS。网站上有很多关于此的问题。请研究并尝试一些事情。
这能回答你的问题吗？ Make div stay at bottom of page's content all the time even when there are scrollbars

标签： html css

【解决方案1】：

您尚未添加任何 CSS。您可以通过添加位置将元素设置为页脚

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<body>
    <footer >
        <div>
        <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://via.placeholder.com/140x100" height="40px"
            width="40px"></a>
        &nbsp;
        <a href="https://github.com/achyutap"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
        &nbsp;
        <a href="mailto:amp@gmail.com"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
    </div>
    </footer>  
</body>
</html>

【讨论】：

【解决方案2】：

你需要一些 CSS：

  <!--this will do-->
  <body style="display: grid;
        align-content: end;
        height: 100vh;
        margin: 0;">
    <footer>
      <div>
       <a href="https://stackoverflow.com/users/14248176/achyuta-pataki">
        <img src="stack.png" height="40px" width="40px">
       </a>
       &nbsp;
       <a href="https://github.com/achyutap"><img src="github.png" 
         height="40px" 
         width="40px"></a>
        &nbsp;
       <a href="mailto:achyutapataki@gmail.com"><img src="email.png" 
        height="40px" width="40px"></a>
       </div>
     </footer>
 </body>

【讨论】：

【解决方案3】：

使用固定页脚

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align:center;
  margin:0 auto;
}

<footer>
  <div>
    <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://image.flaticon.com/icons/png/128/2111/2111628.png" height="40px" width="40px"></a>
    &nbsp;
    <a href="https://github.com/achyutap"><img src="https://image.flaticon.com/icons/png/128/2111/2111432.png" height="40px" width="40px"></a>
    &nbsp;
    <a href="mailto:amp@gmail.com"><img src="https://image.flaticon.com/icons/png/128/732/732200.png" height="40px" width="40px"></a>
  </div>
</footer>

【讨论】：

【解决方案4】：

将以下 CSS 添加到您的 div 或页脚：

position: absolute;
bottom: 0;

仅使用 HTML 元素“footer”并不意味着 div 将位于页面末尾。它只是一个用于语义的 HTML 标签，与元素的可见性无关，即它不应用任何特定的 CSS。

【讨论】：