如何在页面底部设置div

  • 本文关键字:底部 设置 div html css
  • 更新时间 :
  • 英文 :


我真的不知道如何在页面底部设置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>

使用固定页脚

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>

在div或页脚中添加以下CSS:

position: absolute;
bottom: 0;

简单地使用HTML元素";页脚";这并不意味着div会在页面的末尾。它只是一个用于语义的HTML标记,与元素的可见方式无关,也就是说,它不应用任何特定的CSS。

您需要一些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>

您还没有添加任何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>

最新更新