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

Question

我已将页脚保留在页面底部，但它与内容重叠，我无法阻止它。

我在整个互联网上寻找解决方案，none 有效。我觉得我需要移动 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;
}

Answer 1

我不认为你采用的方式是最好的，但在你的情况下可行的是更改你的包装器 class 添加一个等于你的页脚高度的填充底部，如：

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

Answer 2

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

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

但是你应该看看下面的网站，它解释了如何创建一个始终贴在页面底部的页脚，无论内容大小。这将是一个更好的方法。

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

Answer 3

根据您的问题，您希望将页脚贴在页面底部吗？因此，您必须将以下 css 代码添加到

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

body {
margin-bottom:70px;
}

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

Footer overlaps content at the bottom of the page

html

css

webpage

footer