Question

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

＆＃13;

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

＆＃13;

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

在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）我的固定页脚与我的内容重叠

2 个答案: