Body 以 responsive/mobile 模式扩展

Question

我正在制作网站的响应式移动版本，当我发现 body 在调整 window 大小时会扩展，这是它的屏幕截图（header 是粉红色的所以我可以找出错误的像素位置，啊是的，它是意大利语但别担心):

这是代码：

    <head>
        <meta charset="utf-8">
        <title>
        Ravenna | Home
        </title>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="css/zoom-marker.css"/>
        <link rel="shortcut icon" type="image/png" href="favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="js/script.js" async></script>
    </head>
    <body id="body">
        <div id="progressbar"></div>
        <div id="scrollPath"></div>
    <section id="hd" class="header">
        <a href="index.html" class="logo" style="display: flex;"><h2>Ravenna</h2></a>
        <nav>
            <ul>
                <li class="menu">
                    <a href="storia.html">Storia</a>
                    <ul class="ani-menu">
                        <li><a class="aestr1" href="antica.html">Antica</a></li>
                        <li><a class="a" href="esarcato.html">L'Esarcato</a></li>
                        <li><a class="a" href="medioevo.html">Medioevo</a></li>
                        <li><a class="aestr2" href="dal500aoggi.html">Dal 500 a oggi</a></li>
                    </ul>
                </li>
                <li class="menu">
                    <a href="strutture.html">Strutture</a>
                    <ul class="ani-menu">
                        <li><a class="aestr1" href="santapollinareinclasse.html">Sant'Apollinare in Classe</a></li>
                        <li><a class="a" href="museoclassis.html">Museo CLASSIS</a></li>
                        <li><a class="a" href="portoanticoinclasse.html">Porto Antico in Classe</a></li>
                        <li><a class="a" href="sanvitale.html">San Vitale</a></li>
                        <li><a class="a" href="gallaplacidia.html">Galla Placidia</a></li>
                        <li><a class="a" href="battisteroneoniano.html">Battistero Neoniano</a></li>
                        <li><a class="a" href="museoarcivescovile.html">Museo Arcivescovile</a></li>
                        <li><a class="aestr2" href="strutture.html">Altro...</a></li>
                    </ul>
                </li>
                <li class="menu">
                    <a href="banksy.html">Banksy</a>
                    <ul class="ani-menu">
                        <li><a class="aestr1" href="chie.html">Chi è</a></li>
                        <li><a class="a" href="cosacomunica.html">Cosa comunica</a></li>
                        <li><a class="aestr2" href="spuntiperchiacchierare.html">Spunti per chiacchierare</a></li>
                    </ul>
                </li>
             </ul>
          </nav>
          <div id="burgy" class="burgy">
            <a id="onclickburgy" onclick="openSlideMenu()">
            <div id="line1"></div>
            <div id="line2"></div>
            <div id="line3"></div>
            </a>
        </div>
        <div id="side-menu" class="side">
            <div id="containerside" class="containerside">
            <a href="index.html">Home</a>
            <a href="storia.html">Storia</a>
            <a href="strutture.html">Strutture</a>
            <a href="banksy.html">Banksy</a>
            </div>
        </div>
    </section>

    <section class="wall">
        <img src="img/Ravenna.jpg" class="fitBg">
        <div class="content">
            <h2>Benvenuti a Ravenna!</h2>
            <p>N.B. Per esplorare il sito rivolgersi ai punti di cui sopra, una guida più completa può essere trovata qui sotto</p>
            <div class="animation">
            <a href="#tappe">^</a>
            </div>
        </div>
        </section>
        </body>
        </html>

还有 css:

body {
    font-family: 'Poppins', sans-serif;
    min-height: 200vh;
    background: #111;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

    section {
    position: relative;
    padding: 20px;
}

    .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px 60px;
    transition: 0.35s;
}

    .header .logo {
    color: #fff;
    font-size: 1.2em;
    font-family: 'Acme';
    margin-top: 8px;
}

    .wall {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .wall:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 1;
    background: linear-gradient(to top, rgb(17, 17, 17),transparent);
}

    .wall .content {
    position: relative;
    max-width: 900px;
    text-align: center;
    z-index: 1;
}

    .wall .content h2 {
    color: #fff;
    font-size: 5em;
    font-family: 'Leckerli One';
}


    .wall .content a {
    position: absolute;
    color: #fff;
    font-size: 9em;
    font-family: 'Leckerli One';
    bottom: -140px;
    left: 50%;
    transform: translate(-50%, 70%) rotate(180deg);
    font-weight: 900;
}

Answer 1

将此添加到您的 CSS 顶部，您的问题将得到解决：

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

问题是 .header 上的填充使元素超出了您想要的范围。更改 box-sizing 将修改填充的解释方式并将其应用于内容区域而不是扩展它。

Answer 2

尝试像这样使用 overflow-x：

  html,body{
    overflow-x: hidden;
  }

Body 以 responsive/mobile 模式扩展

Body expands in responsive/mobile mode

html

css

expand