如何解决我的页脚与正文内容重叠的问题？

Question

我的页脚与我的内容重叠（并非总是如此，我创建了几个 flex/grid 主题的 HTML 并且它们工作正常，页脚被推到它应该在的位置并且在调整大小时页面页脚仍可识别内容并向下移动）。

页脚是响应式的，宽度/高度随着浏览器 window 调整大小而变化，因此页脚的 .px 值不起作用，我希望它没有必要。

这是代码，我将在本内容的底部包含 JSFiddle。我在 Stack Overflow 上尝试了一些问答，但似乎没有任何效果。

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->



<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<base target="_blank"/>
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- InstanceBeginEditable name="doctitle" -->
        <title>Template</title>
    <!-- InstanceEndEditable -->

    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    
</head>


<body>

    
    <!-- Navigation Bar -->
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <label class="logo">MALLORCA<span>NOW</span></label>
        <ul>
            <li><a class="active"href="Index.html">Home</a></li>
            <li><a href="Holiday-Rentals.html">Holiday Rentals</a></li>
            <li><a href="#">Properties For Sale</a></li>
        </ul>
    </nav>
    <!-- End Navigation Bar -->
    
    
    <!-- Main Content -->
    <!-- InstanceBeginEditable name="main-content" -->  
    <div class="main-content">
    
    <div class="a-body">    
        <div class="a-box">
            <span style="--i:1"><img src="Images/Slideshow/1.png"></span>
            <span style="--i:2"><img src="Images/Slideshow/2.png"></span>
            <span style="--i:3"><img src="Images/Slideshow/3.png"></span>
            <span style="--i:4"><img src="Images/Slideshow/4.png"></span>
            <span style="--i:5"><img src="Images/Slideshow/5.png"></span>
            <span style="--i:6"><img src="Images/Slideshow/1.png"></span>
            <span style="--i:7"><img src="Images/Slideshow/2.png"></span>
            <span style="--i:8"><img src="Images/Slideshow/3.png"></span>
            
        </div>
    </div>
    
    
    </div>
    <!-- InstanceEndEditable -->
    <!-- End Main Content -->
    
    <!-- Footer -->
    <footer>
        <div class="footer-main-content">
            <div class="left box">
                <h2>About Us</h2>
                <div class="footer-content">
                    <p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
                    <div class="social">
                        <a href="https://www.facebook.com/MallorcaNowInformationGuide/"><span class="fab fa-facebook-f"></span></a>
                        <a href="https://twitter.com/mallorcanow1"><span class="fab fa-twitter"></span></a>
                        <a href="https://www.instagram.com/mallorcanow/"><span class="fab fa-instagram"></span></a>
                        <a href="#"><span class="fab fa-youtube"></span></a>
                    </div>
                </div>
            </div>
            
            <div class="center box">
                <h2>Address</h2>
                <div class="footer-content">
                    <div class="place">
                        <a href="https://goo.gl/maps/48EoKioLLJPXgBjD6"><span class="fas fa-map-marker-alt"></span></a>
                        <span class="text">Cala Bona, Mallorca</span>
                    </div>
                    <div class="phone">
                        <a href="tel:34676841886"><span class="fas fa-phone-alt"></span></a>
                        <span class="text">+34-676841886</span>
                    </div>
                    <div class="email">
                        <a href="mailto:office@mallorca-now.com?subject=How can we help you?&body=Give us some more information..."><span class="fas fa-envelope"></span></a>
                        <span class="text">office@mallorca-now.com</span>
                    </div>
                </div>
            </div>
            
            <div class="right box">
                <h2>Contact Us</h2>
                <div class="footer-content">
                 <form action="#">
                    <div class="email">
                        <div class="text">Email *</div>
                        <input type="email" required>
                    </div>
                    <div class="msg">
                        <div class="text">Message *</div>
                        <textarea rows="2" cols="25" required></textarea> 
                    </div>
                    <div class="btn">
                        <button type="submit">Send</button>
                    </div>
                 </form>
                </div>
            </div>
        </div>
        <div class="bottom">
            <center>
                <span class="credit">Est. 2012 -<a href="#"> Mallorca-Now</a></span>
                <span class="far fa-copyright"></span><span> - All Rights Reserved</span>
            </center>
        
        </div>
    </footer>
    
    <!-- End Footer -->
   
</body>
<!-- InstanceEnd --></html>

CSS（最后一个 css 样式是特别应用于此 HTML 的样式）：

@charset "utf-8";
/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */



/*---------------------------------------- Page-Wide Styles ----------------------------------------*/

*{
    padding:0;
    margin:0;
    text-decoration:none;
    list-style:none;
    box-sizing:border-box;
    font-family: 'Montserrat', sans-serif;
}

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline:; 1px solid slategrey;
  border-radius:80px;
}

/*---------------------------------------- Navbar ----------------------------------------*/

nav{
    background-color:#101010;
    height:80px;
    width:100%;
    position:sticky;
    z-index:1;
    top:0;
    overflow:hidden;
}

label.logo{
    color:white;
    font-size:35px;
    font-weight:100;
    line-height:80px;
    padding:0 100px;
}

label.logo span{
    font-weight:900;
}

nav ul{
    float:right;
    margin-right:20px;
}

nav ul li{
    display:inline-block;
    line-height:80px;
    margin:0 5px;
}
    
nav ul li a{
    color:white;
    font-size:17px;
    padding:7px 13px;   
}

nav ul li a.active,nav ul li a:hover{
    background:#6DD5FA;
    transition:0.9s;
    border-radius:4px;
}

.checkbtn{
    font-size:30px;
    color:white;
    float:right;
    line-height:80px;
    margin-right:40px;
    cursor:pointer;
    display:none;
}

#check{
    display:none;
}


@media (max-width: 952px){
    label.logo{
        font-size:30px;
        padding-left:50px;
    }
    nav ul li a{
        font-size:16px;
    }
}

@media (max-width: 489px){
    label.logo{
        font-size:25px;
        padding:0px 0px 0px 10px;
        
    }
    
    .checkbtn{
        font-size:25px;
        margin-right:20px;
    }
    
    nav ul li a{
        font-size:0px;
    }
}

@media (max-width:1000px){
    .checkbtn{
        display:block;
    }
    ul{
        position:fixed;
        width:100%;
        height:100vh;
         background-color: #6DD5FA; /* For browsers that do not support gradients */
        background-image: linear-gradient(to bottom             right, #2980B9, #6DD5FA, #FFFFFF);
        top:80px;
        left:-100%;
        text-align:center;
        transition:all .9s;
    }
    nav ul li{
        display:block;
        margin:50px;
        line-height:30px;
        
    }
    nav ul li a{
        font-size:20px;
    }
    a:hover,a.active{
        background:none;
        color:#0082e6;
    }
    
    #check:checked ~ ul{
        left:0;
    }
}

/*---------------------------------------- Footer ----------------------------------------*/
footer{
    position:relative;
    bottom:0;
    width:100%;
    background-color:#101010;
    color:white;
}

.footer-main-content{
    display:flex;   
}

.footer-main-content .box{
    flex-basis:50%;
    padding:10px 20px;
}

.box h2{
    font-size:1.125rem;
    font-weight:600;
    text-transform:uppercase;
}

.box .footer-content{
    margin:20px 0 0 0;
    position:relative;
}

.box .footer-content:before{
    position:absolute;
    content:'';
    top:-10px;
    height:2px;
    width:100%;
    background:#1a1a1a;
}

.box .footer-content:after{
    position:absolute;
    content:'';
    height:2px;
    width:15%;
    background:#6DD5FA;
    top:-10px;
}

.left .footer-content{
    text-align:justify;
}

.left .footer-content .social{
    margin:20px 0 0 0;
}

.left .footer-content .social a{
    padding: 0 2px;
}

.left .footer-content .social a span{
    height:40px;
    width:40px;
    background:#1a1a1a;
    line-height:40px;
    text-align:center;
    font-size:18px;
    border-radius:5px;
    color:white;
}

.left .footer-content .social a span:hover{
    background:#6DD5FA;
    transition:0.9s;
    
}

.center .footer-content .fas{
    font-size:1.4375rem;
    background:#1a1a1a;
    height:45px;
    width:45px;
    line-height:45px;
    text-align:center;
    border-radius:50%;
    transition:0.9s;
    cursor:pointer;
}

.center .footer-content a span{
    color:white;
}
    

.center .footer-content .fas:hover{
    background:#6DD5FA;
}

.center .footer-content .text{
    font-size:1.0625rem;
    font-weight:500;
    padding-left:10px;
}

.center .footer-content .phone{
    margin:10px 0;
}

.right form .text{
    font-size:1.0625rem;
    margin-bottom:2px;
    color:#656565;
}

.right form .msg{
    margin-top:10px;
}

.right form input, .right form textarea{
    width:100%;
    font-size:1.0625rem;
    background:#151515;
    padding-left:10px;
    border:1px solid #222222;
    color:white;
}

.right form input:focus, 
.right form textarea:focus{
    outline-color:#3498db;
}

.right form input{
    height:32px;
}

.right form .btn{
    margin-top:10px;
}

.right form .btn button{
    height:40px;
    width:100%;
    border:none;
    outline:none;
    background: #6DD5FA;
    font-size:1.0625rem;
    font-weight:500;
    cursor:pointer;
    transition:0.3s;
    color:white;
}

.right form .btn button:hover{
    background:#000;
}

.bottom center{
    padding:5px;
    font-size:0.9375rem;
    background:#151515;
}

.bottom center span{
    color:#656565;
}

.bottom center span a{
    color:white;
}

@media screen and (max-width:900px){
    footer{
        position:relative;
        bottom:0px;
    }
    
    .footer-main-content{
        flex-wrap:wrap;
        flex-direction:column;
    }
    
    .footer-main-content .box{
        margin:5px 0;
    }
}

/*---------------------------------------- Main Content ----------------------------------------*/

.main-content{
    
    min-height:;
    background-color: #6DD5FA; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);      
}


/*---------------------------------------- Rantaltest Styles ----------------------------------------*/

.a-body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.a-box{
    position:relative;
    width:200px;
    height:200px;
}

还有 JSFiddle https://jsfiddle.net/f46vzgwj/

正如您在 JSFiddle 中看到的那样，页脚开始与内容重叠，然后完成其框，您可以看到页脚之后的最后一个内容。

Answer 1

设置height: auto

.a-box{
    position:relative;
    width:200px;
    height:auto; /* this was 200px */
}

如何解决我的页脚与正文内容重叠的问题？

How can I resolve my footer overlapping the body content?

html

css-position

footer

overlap