页脚与页面底部的内容重叠

问题描述：

我的页脚留在页面的底部，但它与内容重叠，我不能阻止它。页脚与页面底部的内容重叠

我已经看遍了互联网上的解决方案，没有任何作品。我有一种感觉，我需要移动div等，但我可能是错的。

这里是我的代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet"> 
    <link rel="stylesheet" href="style/stylesheet.css"> 
    <title>Layout</title> 
</head> 
<body> 
    <div id="header"> 
     <img src="img/top-bar/bar.png" height="10px" class="top"> 
     <ul id="menu-bar"> 
      <li><a href="#header" class="smoothScroll">Home</a></li> 
      <li><a href="#first" class="smoothScroll">Page 1</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropbtn">Page 2</a> 
       <div class="dropdown-content"> 
        <a href="#">Drop 1</a> 
        <a href="#">Drop 2</a> 
       </div> 
      </li> 
      <li><a href="#">Page 3</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 
     <img src="img/archery-1839284.jpg" class="cover"> 
    </div> 
    <div id="wrapper"> 
     <div id="content"> 
      <div id="first" class="item"> 
       <p class="para"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum! 
       </p> 
      </div> 
      <div id="img-span"> 
       <img src="img/board-911636.jpg" class="wide"> 
      </div> 
      <div class="item" style="background-color: red;"> 
       <p class="para"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem sit non ipsam aut perferendis neque magnam deleniti, officia necessitatibus porro odio ipsum est eum aliquam nulla placeat, deserunt? Atque, nisi. 
       </p> 
      </div> 
     </div> 
     <div id="footer"> 
      <img src="img/top-bar/bar.png" height="10px" class="bottom"> 
     </div> 
    </div> 
</body> 
</html>

CSS：

body { 
    background-color: grey; 
    margin: 0; 
    padding: 0; 
    font-family: 'Eczar', serif; 
    scroll-behavior: smooth; 
} 

#header { 
    position: relative; 
    text-align: center; 
} 

.top { 
    position: fixed; 
    width: 100%; 
    z-index: 3000; 
    left: 0; 
    top: 0; 
} 

.bottom { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

#wrapper { 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    margin-top: 100%; 
} 

.cover { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    max-width: 100%; 
    background-image: url(../img/archery-1839284.jpg); 
    overflow: hidden; 
} 

#content { 
    width: 100%; 
    top: 100%; 
    height: 100%; 
    position: relative; 
    background-color: blue; 
    text-align: center; 
} 

.item { 
    padding-left: 20%; 
    padding-right: 20%; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    overflow: hidden; 
    margin: 0; 
    position: relative; 
} 

.item p { 
    font-size: 18px; 
} 

.img-span { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    position: relative 
} 

.wide { 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    overflow: hidden; 
    display: block; 
} 

#footer { 
    width: 100%; 
    height: 70px; 
    background-color: greenyellow; 
    z-index: 3000; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    clear: both; 
}

答

只需将#footer设置为position：relative;将解决重叠问题。

#footer { 
width: 100%; 
height: 70px; 
background-color: greenyellow; 
position: relative; 
clear: both; }

但是，你应该看看下面的网站，该网站介绍了如何创建一个脚注，将始终坚持在页面的底部，有或大或小的内容。这将是一个更好的方法。

http://www.cssstickyfooter.com/using-sticky-footer-code.html

非常感谢，我不敢相信我没有尝试哈哈：D – ArcherBoy27

答

我不认为你去它的方式是最好的，但你会在你的情况下工作，是改变你的包装类添加填充底部等于你的页脚高度，如：

#wrapper { 
    padding: 0 0 10px 0; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    margin-top: 100%; 
} 
#footer { 
    height:10px; 
}

答

根据你的问题，你要坚持你的页脚的你的页面右侧的底部？所以，你必须把下面的css代码

html { 
position: relative; 
min-height: 100%; 
} 

body { 
margin-bottom:70px; 
}

页脚与页面底部的内容重叠

相关推荐