html - 包装 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 但我找不到我的错误。

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

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

编辑 2: 该代码段似乎在这里有效，所以我尝试了不同的浏览器，如 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>