尝试修复页脚别名是在创建空白，而不是移动到底部。

Question

如何删除页面底部的额外空白？

​

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;

}
body{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
   
}
.container {
    max-width: 1400px;
    margin: 0;
    
}   
.navbar{
    position: initial;
    align-items: center;
    background-color: black;
    display: inline-block;
    width: 100%;
    height: 8vh;
    z-index: 1;
}

.logo img{
    height: 100px;
    width: 100px;
    margin-left: 30px;
    float: left;
    position: relative;
    top: -28px;
    
}
.navbar-content{
    margin-top: 0;
    position: relative;
    left: -430px;
    overflow: hidden;
}
.navbar-content a{
    float: right;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    list-style-type: none;    
}
nav ul li a:hover{
    color: #e11717;
}

.hover-line::after{
    content: '';
    width: 0;
    height: 2px;
    display: block;
    background-color: #ff0000;
    transition: width .5s;
}
.hover-line:hover:after{
    width: 100%;
    transition: width .5s;
}
ul{
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}
ul li{
    float: right;
    align-items: center;
    right: 60%;
}
.vid{
    position: relative;
    width: 100%;
    height: 670px;
}
.vid video{
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: -12px;
    object-fit: cover;
}
.vid{
    display: block;
    position: relative;
}
.hp{
    font-size: 45px;
    position: absolute;
    color: white;
    align-items: center;
}
.txt-2{
    font-size: 25px;
    z-index: 9;
    position: relative;
    bottom: -260px;
    left: 40%;
}
.txt-1{
    font-size: 35px;
     position: relative;
     bottom: -250px;
     left: 25%;
}
.button{
    width: 300px;
    height: 40px;
    background-color: #333;
    border-radius: 30px;
    position: absolute;
    top: 420px;
    left: 39%;
    cursor: pointer;
    transition: ease-out 0.5s;
}
.btn{
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    color: #f2f2f2;
    font-size: 20px;
    margin-top: 7px;
    margin-left: 38px;
    outline: none;
    box-shadow: inset 0 0 0 0 #e11717;
}
.button:hover
{
    box-shadow: inset 400px 0 0 0 #e11717;
}
/* featured-brands */
.small-container{
    max-width: 100%;
    margin: 0;
    align-items: center;
    float: right;
}
.col-4{
    display: block;
    background-color: rgba(230, 230, 250, 0);
    width: 150px;
    height: 200px;
}
.col-4 img{
    width: 200px;
    height: 120px;
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
    top: 600px;
}
.title::after{
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
h1{
    font-weight: normal;
    color: #555;
}
.col-4{
    font-size: 14px;
    float: right;
    position: relative;
    top: 580px;
    padding: 50px;
    width: 570px;
    height: 300px;
    display: table-cell;
}
.row{
padding-left: 25px;
padding-right: 25px;

}
.row img{
    size: 1000px*1000px;
}
/* .row:hover{
transform: translateY(-20px);
} */
text-1{
    float: left;
    display: table-cell;
}
.tag-1{
    border: 5px solid #e11717;
    border-radius: 40px;
    right: 25px;   
    margin-bottom: 15px;
    display: table-cell;
    position: relative;
}
.tag-1 img{
    float: left;
    margin-right: 35px;
    width: 100px;
    height: 80px;
}
.tag-2{
    border: 5px solid #e11717;
    border-radius: 40px;
    right: 100px;
    margin-bottom: 15px;
    display: table-cell;
    position: relative;
}
.tag-2 img{
    float: left;
    margin-right: 30px;
    margin-left: -10px;
    width: 100px;
    height: 100px;
}
.tag-3{
    border: 5px solid #e11717;
    border-radius: 40px;
    right: 25px;
    bottom: 15px;
    display: table-cell;
    position: relative;
    margin-top: 15px;
}
.tag-3 img{
    float: left;
    margin-right: 35px;
    height: 100px;
    width: 120px;
}
.tag-4{
    border: 5px solid #e11717;
    border-radius: 40px;
    right: 100px;
    display: table-cell;
    margin-top: 15px;
    position: relative;
}
.tag-4 img{
    float: left;
    margin-right: 35px;
    height: 100px;
    width: 150px;
}
/* offer */
.offer{
    background: radial-gradient(#ffffff,#7d7d7d);
    padding: 30px 0;
    position: relative;
    top: 700px;
    height: 50vh;
    display: table-cell;
}
.col-2 .offer-img{
    padding: 50px;
    width: 600px;
    float: left;
    height: 300px;
    margin-left: -50px;
    animation: hand 3s infinite;
    transform: translateY(50px);
}
@keyframes hand {
    50% {
      transform: translateY(-20px);
    }
  }
small{
    color: #555;
    top: 60px;
    position: relative;
}
.button-6{
    width: 300px;
    height: 40px;
    cursor: pointer;
    background-color: #333;
    border-radius: 30px;
    position: absolute;
    top: 280px;
    left: 44%;
    transition: ease-out 0.5s;
}
.button-6:hover{
    box-shadow: inset 300px 0 0 0 #e11717; 
}
.btn-6{
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    color: #f2f2f2;
    font-size: 20px;
    margin-top: 7px;
    margin-left: 83px;
    outline: none;
    box-shadow: inset 0 0 0 0 #e11717;
}
.col-2 h1{
    position: relative;
    top: 60px;
}
.col-2 p{
    position: relative;
    top: 50px;
}
/* //brands// */
/* .col-6 img{
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        filter: grayscale(100%);
        cursor: pointer;
    }
.col-6 img:hover{
    filter: grayscale(0);
}
.col-6{
        float: left;
        padding: 50px;
        position: relative;
        left: -150px;
        align-items: center;
        right: 60%;
        position: relative;
        top: 750px;
    } */
/* footer */
.footer{
    background: #000;
    color: #8a8a8a;
    font-size: 14px;
    height: 350px;
    padding: 60px 0 20px;
    position: relative;
    bottom: -1000px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: -150px;
    
}
.ftr{
    position: relative;
    top: -500px;
}
.footer p{
    color: #8a8a8a;
}
.footer h3{
    color: #fff;
    margin-bottom: 20px;
}
.footer-col-1,.footer-col-2,.footer-col-3,.footer-col-4{
    min-width: 250px;
    margin-bottom: 20px;
}
.footer-col-1{
    flex-basis: 30%;
    position: relative;
    top: 500px;
}
.footer-col-2{
    flex: 1; 
    margin-left: 450px;
    position: relative;
    top: 160px;
}
.footer-col-2 img{
    width: 180px;
    position: relative;
    top: 50px;
    margin-left: 100px;
}
.footer-col-3,.footer-col-4{
    flex-basis: 12%;
    margin-left: 1000px;
    text-align: center;
}
.footer-col-3 ul{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
.footer-col-3 ul li{
    float: right;
    align-items: center;
    right: 60%;
}
.footer-col-4 ul{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
.footer-col-4 ul li{
    float: right;
    align-items: center;
    right: 60%;
}
ul{
    list-style-type: none;
}
.app-logo{
    margin-top: 20px;
}
.app-logo img{
    width: 140px;
}
.footer hr{
    border: none;
    background: #b5b5b5;
    height: 1px;
    margin: 25px 0;
    position: relative;
    bottom: 500px;
}
.copyright{
    text-align: center;
    position: relative;
    bottom: 500px;
}
/* // Gallery // */
.row-2{
    justify-content: space-between;
    margin: 100px auto 50px;
    cursor: pointer;
}
.row-2:after {
    content: "";
    display: table;
    clear: both
}
.col-5{
    position: relative;
    top: 100px;
    right: -10px;
    max-width: 2500px;
    float: left;
    width: 25%;
}
.col-5 img:hover{
  transform: scale(1.1,1.1);
}
.col-5 img{
    object-fit: cover;
}
.row-3 h2{
    position: relative;
    top: 100px;
}
select{
    border: 1px solid #ff523b;
    padding: 5px;
    position: relative;
    top: 100px;
}
select:focus{
outline: none;
}
.page-btn{
    margin: 0 auto 80px;
    margin-left: 70px;
}
.page-btn span{
display: inline-block; 
border: 1px solid #ff523b;
margin-left: 10px;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
margin-top: 70px;
margin-right: 30px;
}

.page-btn span:hover{
    background-color: #ff523b;
    color: #fff;
}
/* // detail page// */
.single-product{
margin-top: 80px;
}
.single-product .col-2 img{
    padding: 0;
    margin-right: 280px;
    float: left;
 }
 .single-product .col-2{
     padding: 20px;
      display: table-cell;
      position: relative;
  }
.single-product h4{
     margin: 20px 0;
     font-size: 22px;
     font-weight: bold;
     position: relative;
     top: 90px;
}
.dtl h3{
    position: relative;
    top: 70px;
}

.dtl{
    position: relative;
     bottom: 380px;
     left: 20px;
     display: block;
     padding: 10px;
     margin: 20px;
}
.button-2{
    position: relative;
    top: 250px;
    left: -0px;
}
.single-product input{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 20px;
    border: 1px solid #ff523b;
    }
input:focus{
        outline: none;
    }
.single-product .fa{
        color: #ff523b;
        margin-left: 10px;
    
    }
.single-product .row{
        text-align: left;
    }
.single-product .col-2{
        padding: 20px 0;
    }
.single-product h1{
        font-size: 26px;
        line-height: 32px;
    }
.row-2 h2{
    position: relative;
    right: 420px;
    top: 200px;
}
.row-2 p{
    position: relative;
    right: 420px;
    top: 200px;
}
/* // Warrenty table// */
.numbered-list ol {
    list-style-type: none;
    margin-top: 50px;
  }
  .numbered-list ol li {
    position: relative;
    left: 1px;
    list-style: none;
    margin: 20px 0;
    padding-left: 25px;
    padding-top: 10px;
    text-transform: uppercase;
    font-family: 'Darker Grotesque', sans-serif;
    letter-spacing: 1px;
    font-weight: 600;
    counter-increment: listelement;
  }
  .numbered-list ol li:before{
    content: counter(listelement);
    border-radius: 50%;
    background-color: #e11717;
    color: #fff;
    font-size: 25px;
    height: 45px;
    width: 45px;
    position: absolute;
    left: -40px;
    line-height: 45px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
   bottom: -12px;
  }
.numbered-list ol li:last-child {
    margin-bottom: 50px;
  }
  .numbered-list{
      position: relative;
      bottom: 300px;
      right: 700px;
  }
.list-2{
    position: relative;
    left: 600px;
    bottom: 370px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <title>Auto-World</title>
    <link rel="shortcut icon" href="images/auto-world-logo.png">    
    <link rel="stylesheet" href="cars.css">
</head>
<body>
    <!-- ----nav-bar------ -->
    <div class="container">
        <div class="navbar">
        <nav>
            <div class="logo">
                <img src="./images/auto-world-logo.png">
                </div>
            <div class="navbar-content">
                <ul>
                    <li><a href="home.html" class="hover-line">HOME</a></li>
                    <li><a href="Gallery.html" class="hover-line">GALLERY</a></li>
                    <li><a href="umer.html" class="hover-line">ABOUT-US</a></li>
                    <li><a href="umer2.html" class="hover-line">CONTACT-US</a></li>
                </ul>
            </div>
        </div>
        </nav>
    <div class="vid-txt">
    <div class="hp vid">
        <video autoplay muted loop>
            <source src="./images/ad.mp4">
        </video>
    </div>
    <div class="txt-1 hp">
        <b>Designed for living. Engineered to last.</b>
    </div>
    <div class="hp txt-2">
        <b>A CLASS OF ITS OWN</b>
    </div>
    <div class="button">
         <a href="Gallery.html" class="btn"> EXPLORE OUR GALLERY </a>
    </div>
    </div>
     <!-- -----Fetured Brands----- -->
     <div class="small-container">
        <h2 class="title">Featured Brands</h2>
        <div class="row">
            <div class="col-4 tag-1">              
                <a href="#" class="text-1"><img src="pngwing.com (2).png"></a>
                <h1><b>HONDA</b></h1>
                <p>Honda has been the world's largest motorcycle manufacturer since 1959,reaching a production of 400 million by the end of 2019,as well as the world's largest manufacturer of internal combustion engines measured by volume, producing more than 14 million internal combustion engines each year. <a href="#">Read More...</a></p>
            
            </div>
            <div class="col-4 tag-2">
                <a href="#" class="text-2"><img src="pngwing.com (3).png"></a>
                <h1><b>SUZUKI</b></h1>
                 <p>Suzuki Motor Corporation is a Japanese multinational corporation headquartered in Minami-ku, Hamamatsu, Japan. Suzuki manufactures automobiles, motorcycles, all-terrain vehicles, outboard marine engines, wheelchairs and a variety of other small internal combustion engines<a href="#">Read More...</a></p>
                
            </div>
            <br>
            <div class="col-4 tag-3">
                <a href="#" class="text-3"><img src="pngwing.com (1).png"></a>
                <h1><b>TOYOTA</b></h1>
                <p>Toyota Motor Corporation is a Japanese inational automotive manufacturer headquartered in Toyota City, Aichi, Japan. It was founded by Kiichiro Toyoda and incorporated on August 28. Toyota is one of the largest automobile manufacturers in the world.<a href="#">Read More...</a></p>
                
            </div>
            <div class="col-4 tag-4">
                <a href="#" class="text-4"><img src="pngwing.com (8).png"></a>
                <h1><b>KIA</b></h1>
                <p>Kia Corporation, commonly known as Kia, is a South Korean multinational automobile manufacturer headquartered in Seoul, South Korea. It is South Korea's second largest automobile manufacturer after Hyundai Motor Company, with sales of over 2.8 million vehicles in 2019.<a href="#">Read More...</a></p>
           
            </div>
        </div>
        <!-- offer -->
        <div class="offer">
            <div class=" civic small-container">
                <div class="row">
                    <div class="col-2">
                        <img src="images/civic-rs-2.png" class="offer-img">
                    </div>
                    <div class="col-2">
                        <p> Cars Exclusively Availabe On Auto World</p>
                        <h1>CARS ON AUTO WORLD</h1>
                        <small>AutoWorld is a company that deals with all types of cars and motors. They started off with a company in collaboration with "GOOD YEAR" and then build up their own establishment. They have different showrooms for different brands at various locations in the city and because of their services they have attracted a vast number of Customers in very short duration of time.
                        </small>
                        <div class="button-6">
                        <a href="c1.html" class="btn-6">Book Now &#8594;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- // brands // -->
        <!-- <div class="brands">
            <div class="small-container">
                <div class="row">
                    <div class="col-6">
                        <img style="height: 130px; width: 100px;" src="pngwing.com (3).png">
                    </div>
                    <div class="col-6">
                        <img style="height: 130px; width: 160px;" src="pngwing.com (2).png">
                    </div>
                    <div class="col-6">
                        <img style="height: 160px; width: 180px;" src="pngwing.com (1).png">
                    </div>
                    <div class="col-6">
                        <img style="height: 160px; width: 230px; margin-top: -20px; margin-left: -80px;" src="pngwing.com (8).png">
                    </div>
                </div>
            </div>
        </div> -->
        <!-- footer -->
        <div class="footer">
            <div class="container">
                <div class="ftr row">
                    <div class="footer-col-1">
                        <h3>Dowlond Our App</h3>
                        <p>Dowlond App FOr Andriod And Ios Phone</p>
                        <div class="app-logo">
                            <img src="images/google play.png">
                            <img src="images/app store.png" alt="">
                        </div>
                    </div>
                    <div class="footer-col-2">
                        <img src="images/auto-world-logo.png">
                        <p>Our Purpose Is To Provide You The Best Offers And Deals</p>
                    </div>
                    <div class="footer-col-3">
                        <h3>Services</h3>
                        <ul>
                            <li>Online Bookings</li>
                            <li>Spare Parts</li>
                        </ul>
                    </div>
                    <div class="footer-col-4">
                        <h3>Help & Support</h3>
                        <ul>
                            <li>Contact US</li>
                            <li>Location On Maps</li>
                            <li>Carrers</li>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="copyright"><p>Copyright 2022 - Sahil Valecha , Waleed Imran , Umer Javed</p></div>
            </div>
        </div>
</body>
</html>

​

Answer 1

也许你可以试着把这个放在你的css上。你可以放！如果它不起作用的话，它也很重要。让我知道

​

.footer {
  bottom:0 ;
  right:0 ;
  left:0 
  }

​