Mój stopkę nakłada się na moje treści (nie zawsze, stworzyłem kilka html html flex / siatki i działają dobrze, stopka zostaje popychana do miejsca, w którym powinno być i podczas zmiany rozmiaru strony Stopnia nadal rozpoznaje treść i idzie dalej).

Stopka jest responsywna, zmiana szerokości / wysokości, ponieważ okno przeglądarki jest zmieniana, więc wartość .px dla stopki nie działałaby i mam nadzieję, że nie jest to konieczne.

Oto kod, a dołączę JSFiddle na dole tej zawartości. Próbowałem kilka odpowiedzi na przepełnienie stosu, ale nic nie działa.

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 (ostatni styl CSS to styl zastosowany do tego systemu 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;
}

I jsfiddle. https://jsfiddle.net/f46vzgwj/

Jak widać w JSFiddle, stopka zaczyna nakładać zawartość, a następnie kończy swoje pudełko, a można zobaczyć ostatnią zawartość po stopce.

-1
MarkMC94 13 kwiecień 2021, 18:42

1 odpowiedź

Najlepsza odpowiedź

Ustaw height: auto

.a-box{
    position:relative;
    width:200px;
    height:auto; /* this was 200px */
}
0
ch1puha 13 kwiecień 2021, 20:51