包装div旁边的空白

Question

我正在一个小型网站上使用<div class="wrapper">围绕其内容。

问题是，在右侧和底部添加了空格，请参见屏幕截图：

我的HTML当前如下所示：

    :root {
        --primary: #ddd;
        --dark: #333;
        --light: #fff;
        --shadow: 0 2px 5px rgba(104, 104, 104, 0.8);
    }
    
    html * {
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    body{
        margin: 0;
        padding: 0;
    }
    
    .wrapper {
        display: grid;
        min-height: 100vh;
        background-color: lightgray;  
    }
    
    .nav {
        overflow: hidden;
        position: fixed;
        /*top: 15px;*/
        width: 100%;
        text-align: center;
    }
    
    .nav > ul {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        height: 45px;
        padding: 0;
        padding-top: 5px;
        box-shadow: var(--shadow);
        border-radius: 0 0 8px 8px;
        background-color: white;
    }
    
    .nav > ul > li{
        display: inline;
        float: left;
    }
    
    .nav a {
        color: dimgrey;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 2em;
    }
    
    .home {
        display: grid;
        margin: 5vh 5vh 5vh 5vh;
        margin-top: 65px;
        min-height: 90vh;
        cursor: default;
        color: dimgrey;
        background-color: white;
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
    
    .text {
        border-radius: 16px;
    }
    
    .image {
        grid-area: image;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('schach.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 16px 0px 0px 16px;
    }
    
    .info {
        display: grid;
        margin: 5vh 5vh 5vh 5vh;
        margin-top: 65px;
        min-height: 90vh;
        background-color: white;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('code.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        cursor: default;
        color: dimgrey;
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
    
    .headlines {
        text-align: right;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.8);
        padding-top: 25px;
        box-shadow: var(--shadow);
        height: auto;
    }
    
    .contact {
        display: grid;
        margin: 5vh 5vh 5vh 5vh;
        margin-top: 65px;
        min-height: 90vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('oldphones.jpg');
        background-repeat: no-repeat;
        background-position: center;
        cursor: default;
        color: dimgrey;
        background-color: white;
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
    
    .footer {
        width: 100%;
        height: 20px;
        text-align: center;
    }
    
    .footer > ul {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        padding: 10px 0 10px 0;
        box-shadow: var(--shadow);
        border-radius: 8px 8px 8px 8px;
        background-color: white;
    }
    
    .footer > ul > li {
        display: inline;
        float: left;
    }
    
    .footer a {
        color: dimgrey;
        padding: 14px 16px;
        text-decoration: none;
        font-weight: bold;
    }

        <div class="nav">
        <ul>
            <li>
                <a href="#home">
                    <i class="fas fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#info">
                    <i class="fas fa-info-circle"></i>
                </a>
            </li>
            <li>
                <a href="#contact">
                    <i class="fas fa-comments"></i>
                </a>
            </li>
        </ul>
    </div>
    
    <div class="wrapper">
        <span id="home"></span>
        <div class="home">
            <div class="image"></div>
            <div class="text">
                <div class="text_content">
                    <h4>headlinesmall</h4>
                    <h2>headlinebig</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore
                        magna aliquyam erat, sed diam voluptua. At vero eos et
                        accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                        dolore magna aliquyam erat, sed diam voluptua. At vero eos
                        et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
        </div>
    
        <span id="info"></span>
        <div class="info">
            <p class="headlines">
                <span class="headlinesmall">headlinesmall</span><br />
                <span class="headlinebig">headlinebig</span><br /><br />
                <span class="info_text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor
                    sit amet.
                </span>
            </p>
    
            <div class="slider">
                <div class="slider_content">
                    <p class="slider_content_text">Label 01</p>
                    <p class="slider_content_text">Label 02</p>
                    <p class="slider_content_text">Label 03</p>
                    <p class="slider_content_text">Label 04</p>
                    <p class="slider_content_text">Label 05</p>
                    <p class="slider_content_text">Label 06</p>
                </div>
            </div>
        </div>
    
        <span id="contact"></span>
        <div class="contact">
            <div class="contactimage"></div>
            <form></form>
        </div>
    
        <div class="footer">
            <ul>
                <li>
                    <a href="#home">
                        Datenschutz
                    </a>
                </li>
                <li>
                    <a href="#info">
                        Impressum
                    </a>
                </li>
            </ul>
        </div>
    </div>

我当然尝试删除边距和填充，将最小宽度设置为100％。 100vw，无需包装即可工作，删除了框大小：border-box，但我找不到我的错误。

顶部的那个小导航框占据了整个设备的宽度，它位于包装纸的外部。当我将其放入包装纸时，它也要占据整个宽度。但是以某种方式删除包装器并不能解决问题，因此我认为错误必须放在包装器内容的某个地方？

编辑： 因此，我发现将包装器的宽度设置为111vw可以填充空白，但是我不知道为什么。但是，增加包装纸的最小高度不会导致移除底部空白。

编辑2： 该代码段似乎在这里有效，因此我尝试了IE等其他浏览器-宽度100％的浏览器确实可以在其中运行，但在Chrome浏览器中却不能。可能是什么原因，CSS出错了？

编辑3： 问题可能与CSS Grid有关吗？该代码在任何经过​​测试的浏览器中的行为均不同。 Edge，IE，Firefox，Chrome ...

Answer 1

删除页脚高度：20像素；

    :root {
        --primary: #ddd;
        --dark: #333;
        --light: #fff;
        --shadow: 0 2px 5px rgba(104, 104, 104, 0.8);
    }
    
    html * {
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    body{
        margin: 0;
        padding: 0;
    }
    
    .wrapper {
        display: grid;
        min-height: 100vh;
        background-color: lightgray;  
    }
    
    .nav {
        overflow: hidden;
        position: fixed;
        /*top: 15px;*/
        width: 100%;
        text-align: center;
    }
    
    .nav > ul {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        height: 45px;
        padding: 0;
        padding-top: 5px;
        box-shadow: var(--shadow);
        border-radius: 0 0 8px 8px;
        background-color: white;
    }
    
    .nav > ul > li{
        display: inline;
        float: left;
    }
    
    .nav a {
        color: dimgrey;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 2em;
    }
    
    .home {
        display: grid;
        margin: 5vh 5vh 5vh 5vh;
        margin-top: 65px;
        min-height: 90vh;
        cursor: default;
        color: dimgrey;
        background-color: white;
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
    
    .text {
        border-radius: 16px;
    }
    
    .image {
        grid-area: image;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('schach.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 16px 0px 0px 16px;
    }
    
    .info {
        display: grid;
        margin: 5vh 5vh 5vh 5vh;
        margin-top: 65px;
        min-height: 90vh;
        background-color: white;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('code.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        cursor: default;
        color: dimgrey;
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
    
    .headlines {
        text-align: right;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.8);
        padding-top: 25px;
        box-shadow: var(--shadow);
        height: auto;
    }
    
    .contact {
        display: grid;
        margin: 5vh 5vh 5vh 5vh;
        margin-top: 65px;
        min-height: 90vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('oldphones.jpg');
        background-repeat: no-repeat;
        background-position: center;
        cursor: default;
        color: dimgrey;
        background-color: white;
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
    
    .footer {
        width: 100%;
 
        text-align: center;
    }
    
    .footer > ul {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        padding: 10px 0 10px 0;
        box-shadow: var(--shadow);
        border-radius: 8px 8px 8px 8px;
        background-color: white;
    }
    
    .footer > ul > li {
        display: inline;
        float: left;
    }
    
    .footer a {
        color: dimgrey;
        padding: 14px 16px;
        text-decoration: none;
        font-weight: bold;
    }

        <div class="nav">
        <ul>
            <li>
                <a href="#home">
                    <i class="fas fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#info">
                    <i class="fas fa-info-circle"></i>
                </a>
            </li>
            <li>
                <a href="#contact">
                    <i class="fas fa-comments"></i>
                </a>
            </li>
        </ul>
    </div>
    
    <div class="wrapper">
        <span id="home"></span>
        <div class="home">
            <div class="image"></div>
            <div class="text">
                <div class="text_content">
                    <h4>headlinesmall</h4>
                    <h2>headlinebig</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore
                        magna aliquyam erat, sed diam voluptua. At vero eos et
                        accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                        dolore magna aliquyam erat, sed diam voluptua. At vero eos
                        et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
        </div>
    
        <span id="info"></span>
        <div class="info">
            <p class="headlines">
                <span class="headlinesmall">headlinesmall</span><br />
                <span class="headlinebig">headlinebig</span><br /><br />
                <span class="info_text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor
                    sit amet.
                </span>
            </p>
    
            <div class="slider">
                <div class="slider_content">
                    <p class="slider_content_text">Label 01</p>
                    <p class="slider_content_text">Label 02</p>
                    <p class="slider_content_text">Label 03</p>
                    <p class="slider_content_text">Label 04</p>
                    <p class="slider_content_text">Label 05</p>
                    <p class="slider_content_text">Label 06</p>
                </div>
            </div>
        </div>
    
        <span id="contact"></span>
        <div class="contact">
            <div class="contactimage"></div>
            <form></form>
        </div>
    
        <div class="footer">
            <ul>
                <li>
                    <a href="#home">
                        Datenschutz
                    </a>
                </li>
                <li>
                    <a href="#info">
                        Impressum
                    </a>
                </li>
            </ul>
        </div>
    </div>