页脚问题 CSS

  • 本文关键字:CSS 问题 html css
  • 更新时间 :
  • 英文 :


我目前正在制作我的第一个网站,我的页脚有问题。我使用的是固定页脚,但是一旦我开始缩小到移动,页脚就会覆盖内容。有什么建议可以解决这个问题吗?这是我的代码:

这是我的标记:

footer {
clear: both;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: rgba(48, 57, 148, 0.8);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<footer>
<div class="socialmedia">
<a href="https://www.linkedin.com/in/andrea-de-roeck-b6b47164/"><span class="hidden">Linkedin</span><span class="fab fa-linkedin" aria-hidden="true"></span></a>
<a href="https://www.instagram.com/dreaderoeck/"><span class="hidden">Instagram</span><span class="fab fa-instagram" aria-hidden="true"></span></a>
<a href="mailto:deroeck.andrea@gmail.com"><span class="hidden">Email</span><span class="fas fa-envelope-square" aria-hidden="true"></span></a>
</div>
</footer>

任何建议将不胜感激,谢谢:)

你可以应用 css@media

//480 is the window max-width you will apply the new css.
@media only screen and (max-width: 480px) {
footer {
position: relative;
bottom: 0;
}
}

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

给出一个等于页脚高度的最小填充底部主体。

body {
padding-bottom: 50px;
}

最新更新