包装器 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，在没有包装的情况下工作，删除了 box-sizing:border-box 但我找不到我的错误。

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

编辑： 所以我发现将包装器宽度设置为 111vw 会使其填充空白区域，但我不明白为什么。但是，增加包装器的最小高度不会导致删除底部的空白。

编辑 2： sn-p 似乎在这里工作，所以我尝试了不同的浏览器，比如 IE - width 100% 在那里工作，但在 Chrome 中不行。可能是什么原因，css有问题吗？

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

Answer 1

删除页脚高度：20px；

    :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>