(CSS) 我的固定页脚与我的内容重叠

Question

所以我在使用固定页脚时遇到了问题。本质上发生的事情是页脚会卡在浏览器的底部 window 但不会卡在底部页面，并覆盖部分内容。

<body>
    <nav class="fixed-nav-bar">
      <div id="menu">
       <a class="sitename" href="index.html"><h1>Sitename</h1></a>
       <a class="show" href="#hidemenu"><img class="menubur" src="img/menu.svg" alt="menu"></a>
        <ul class="menu-items">
         <li><a href="shop.html">shop</a></li>
         <li><a href="portfolio.html">portfolio</a></li>
         <li><a href="contact.html">contact</a></li>
         <li><a href="log.html">log</a></li>
         <li><a href="about.html">about</a></li>
        </ul>
       </div>
      </nav>
      <section class="content">
        <section class="about">
       <section class="floated">
        <img src="img/monkey.jpg" alt="monkey">
       </section>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       <div class="faqs">
       <button class="accordion">Question 1</button>
       <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>
       <button class="accordion">Question 2</button>
       <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>
       <button class="accordion">Questions 3</button>
       <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>
       </div>
      </section>
      </section>
      <footer class="footer">
       <p class="footer-links">
        <a href="http://www.instagram.com/">Instagram</a>
        <a href="http://www.facebook.com/">Facebook</a>
        <a href="http://www.twitter.com/">Twitter</a>
        <a href="https://www.tumblr.com/blog/">Tumblr</a>
        <a href="http://www.snapchat.com">Snapchat</a>
       </p>
       <p class="footer-company-name">Name &copy; 2017</p>
      </footer>
        </body>

和 CSS:

body {
   margin-bottom: 100px;
   clear: both;
}

.fixed-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    height: 10px;
    background-color: #fff;
    color: #000033;
}

.content {
    margin-top: 100px;
}

.fixed-nav-bar li, .fixed-nav-bar a {
  background: #fff;
    height: 50px;
    line-height: 50px;
}
.menu {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
  background: #fff;
}
.menu-items {
    position: absolute;
    right: 10px;
    display: inline-block;
    float: right;
    padding: 0px;
  background: #fff;
}
.sitename {
    position: absolute;
    left: 10px;
    display: inline-block;
    margin-right: 20px;
    text-decoration: none;
  background: #fff;
}
.menu-items li {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
}
.menu-items a {
    text-decoration: none;
}

.show, .hide {
    display: none;
    padding-left: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center left;
    color: #dde1e2;
}
.footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background-color: #fff;
    width: 100%;
    text-align: center;
    font: normal 18px sans-serif;
    padding: 20px;
    margin-top: 80px;
}



.footer .footer-company-name{
    margin: 0;
}

.footer .footer-links{
    padding: 35px 0 23px;
    margin: 0;
}

.footer .footer-links a{
    display:inline-block;
    text-decoration: none;
    color: inherit;
}

这是一个 fiddle：https://jsfiddle.net/7taxrv1x/4/

我已经尝试了一些关于这个主题的解决方案，其中一些在页脚中。我不想要的就像这里的解决方案：My Footer Floats

Answer 1

在 CSS 文件中注释或删除正文选择器中的 margin-bottom: 100px; 和 .footer 选择器中的 position: absolute;。

Answer 2

您可以通过删除页面的底部边距来解决此问题

body {
    //remove margin-bottom: 100px;
    clear: both;
}

并将您的页脚样式更改为：

.footer{
    //remove position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background-color: #fff;
    width: 100%;
    text-align: center;
    font: normal 18px sans-serif;
    padding: 20px;
    margin-top: 80px;
}

(CSS) 我的固定页脚与我的内容重叠

(CSS) My fixed footer overlaps my content

html

css

sticky-footer