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

Question

所以我在使用固定页脚时遇到了问题。基本上发生的事情是页脚将卡在浏览器窗口的底部而不是底部页面，并覆盖了一些内容。

<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;
}

这是一个小提琴：https://jsfiddle.net/7taxrv1x/4/

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

Answer 1

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

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;
}

Answer 2

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