Question

我当前正在建立我的第一个网站，页脚出现问题。我正在使用固定的页脚，但是一旦我开始按比例缩小到移动页脚，就可以浏览内容。关于如何解决此问题，有什么建议吗？这是我的代码：

这是我的标记：

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>

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

Answer 1

您可以应用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

Answer 2

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

body {
   padding-bottom: 50px;
}

页脚问题CSS

2 个答案: