时间戳

首页 > 解决方案 > 页脚问题 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>

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

标签： htmlcss

解决方案

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

body {
   padding-bottom: 50px;
}

推荐阅读