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