页脚元素下方突然出现边距，持续至少 1 秒

Question

我正在准备这个网站，并且发生了这个错误，即看到页脚下方突然出现边距。我已经重新编辑了该网站近3次，但无法摆脱这个问题。此外，我还投入了足够的时间来捕获出现 1 秒时间的边距。:P 下面是附加的图像。 页脚下方边距 这也不是一个重复的问题。我已阅读此处提供的所有其他问题。他们的问题和我的不一样。读了一个问题，我以为我找到了解决方案并在页脚中添加了垂直对齐：底部，但它不起作用。

我的工作代码附在下面。

<header>
    <div class="nav-container">
        <nav>
            <div class="nav_logo">
                <img src="image/logo.png" alt="logo">
            </div>
            <ul class="nav_links">
                <li class="link"><a href="">Home</a></li>
                <li class="link"><a href="">WEb</a></li>
                <li class="link"><a href="web">WEb</a></li>
                <li class="link"><a href="webg">Web</a></li>
            </ul>
            <a href="contact"><div class="contact">
                <span><i class="fas fa-phone-alt"></i></span>Contact us
            </div></a>
        </nav><!--nav_ends-->
    </div>
    </header>
<section class="content">
        <h1>Welcome to My Website</h1>
        <p>This is the main content of the page.</p>
        <h1>Hello</h1>
        <h1>Hello1</h1>
        <h1>Hello2</h1>
        <h1>Hello3</h1>
        <h1>Hello4</h1>
        <h1>Hello5</h1>
        <h1>Hello6</h1>
        <h1>Hello7</h1>
        
</section>
<a class="to-top" href=""><i class="fas fa-arrow-circle-up"></i></a>
<script type="text/javascript" src="js/main.js"></script>
    <footer>
        <div class="wrapper">
            <div class="left">
            <ul>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">Business Registration</a></li>
            </ul>
            </div>
            <div class="center">
            <ul>
                <li><a href="">Terms and condition</a></li>
                <li><a href="">Privacy policy</a></li>
                <li><a href="">Refund & cancellation policy</a></li>
            </ul>
            </div>
            <div class="subscribe"><h6>Subscribe:</h6>
                <form>
                    <div class="input-group">
                        <span><i class="fas fa-envelope"></i></span>
                        <input id="email" type="email" name="email" placeholder="Email"></input>
                        <input type="submit" id="submit" value="Subscribe"></input>
                    </div>
                </form>
            </div>
        </div><!--wrapper-->
        <div class="copyright">
            <p>2024 &copy; techieafrohead<br>
            All rights reserved</p>
        </div>
    </footer>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --primary-color: #00605f;
    --secondary-color: #017479;
    --text-dark:#0f172a;
    --text-dark-a:#007bff;
    --text-light:#94a3b8;
    --white:#ffffff;
    --hover-color:#E5E4E2;
    --max-width: 1400px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Make the body and html take the full height of the viewport */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}
header{
    max-width: 100%;
    padding: 1rem;
    height: 100px;
    background: #304352;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #d7d2cc, #304352);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #d7d2cc, #304352); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
body{
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    min-height: 100%;
    min-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
    min-width:250px;
    overflow-x:scroll;

    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

    text-align: justify;
    text-justify: inter-word;
    white-space: normal;
    text-wrap: wrap;
    hyphens: auto;

    overscroll-behavior: none;
}
/* The main content will grow to fill the remaining space */
.content {
    flex: 1;
}
img {
    pointer-events: none;
}
.nav-container{
    max-width: var(--max-width);
    margin: 0 auto;
}
nav{
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
nav a{
    text-decoration: none;
}

.nav_logo img{
    max-width: 70px;
    background: var(--white);
    padding: .2rem;
    border-radius: 2rem;
}
.nav_links{
    list-style: none;
    display: flex;
    align-items: center;
    gap:2rem;
}
.link {
    outline : 2px solid var(--white);
}
.link a{
    text-decoration: none;
    font-weight: 600;
    color:var(--white);
}
.link {
    background-color: var(--secondary-color);
    padding: .5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: 0.3s;
}
.link:hover, .link:focus{
    background-color: var(--primary-color);
}
.contact{
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--primary-color);
    border-radius: 2rem;
    cursor: pointer;
    transition: 0.3s;
}
.contact span{
    padding: 5px 8px;
    font-size: 1.5rem;
    color: var(--primary-color);
    background-color: var(--white);
    border-radius: 100%;
}
.contact:hover,.contact:focus{
    background-color: var(--secondary-color)
}

/* Footer styles */
footer{
    max-width: 100%;
    background: var(--primary-color);
    width: 100%;
    margin: 0 auto;
    padding: .5rem 1rem;
        vertical-align:bottom;
}
footer .wrapper{
    display: grid;
    grid-template-columns: repeat(3,minmax(0, 1fr));
    margin: 1rem;
}
.wrapper ul{
    list-style: none;
} 
.wrapper .center{
    text-align: center;
}
.wrapper ul li a{
    text-decoration: none;
    color: var(--white);
    font-size: .75rem;
    font-weight: 300;
}
.wrapper .subscribe{
    margin-left: auto;
}
.wrapper .subscribe h6{
    color: var(--white);
    font-size: .75rem;
    font-weight: 300;
    margin-bottom: .3rem;
}
.wrapper .subscribe .input-group{
    padding: .5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-weight: 400;
    color: var(--white);
    display: table;
    border-collapse: collapse;
    width: 100%;    
}
.input-group > * {
  display: table-cell;
  vertical-align: middle;
  outline: 1px solid var(--white);
}
.input-group span{
  background-color: var(--primary-color);
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  padding: 0.5rem;
}
#email,#submit{
    width: 100%;
}
.input-group input{
  border: 0;
  display: block;
  width: 100%;
  padding:.3rem;
}
.input-group input[type=submit]{
    background-color: var(--primary-color);
    color: var(--white);
}
.copyright{
    text-align: center;
    font-size: .75rem;
    font-weight: 400;
    color: var(--text-light);
}
@media(max-width: 768px){
.nav_links{
        display: none;
    }
    .nav_logo img{
        max-width: 50px;
    }
    .contact{
        padding: .3rem .5rem;
        gap:.3rem;
    }
    .contact span{
        padding: 3px 5px;
        font-size: .9rem;
    }
}

Answer 1

删除overflow-x:scroll；来自身体。这将解决您的问题。顺便说一句，这不是页脚下方的额外边距，而是显示在底部的滚动条。希望这有帮助。