网站HTML元素外出现空白区域，如何消除或设为窗口100%高度？

我的网站中HTML元素外部出现了空白区域，我希望消除该空白，或者将HTML元素的高度设置为窗口的100%，但尝试设置HTML元素高度为100%并未生效，请问该如何解决？

原始代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CTOP</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                font-family: "Work Sans", sans-serif;
            }
            .container {
                display: grid;
                grid-template-areas: 
                "nv"
                "hd"
                "ft";
            }
            nav {
                grid-area: nv;
                padding: 30px;
                display: grid;
                grid-template-areas: 
                "login signup ct ct ct ct ct ct ct ct ct ct ct ct";
                border-bottom: 5px solid #333;
            }
            .login {
                grid-area: login;
            }
            .signup {
                grid-area: signup;
            }
            a {
                width: fit-content;
                font-size: 20px;
                text-decoration: none;
            }
            header {
                padding: 200px;
            }
            .text {
                text-align: center;
            }
            header {
                grid-area: hd;
            }
            footer {
                background-color: #333;
                color: #fff;
                padding: 20px;
                text-align: center;
                grid-area: ft;
            }
        </style>
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&#038;display=swap" rel="stylesheet"/>
    </head>
    <body>
        <div class="container">
            <nav>
                <a class="login" href="/login">Login</a>
                <a class="signup" href="/signup">Signup</a>
            </nav>
            <header>
                <div class="text">
                    <h1>Hi, Welcome To COTP!</h1>
                </div>
            </header>
            <footer>
                <p>&copy; 2024 Enhanced Article Page. All rights reserved.</p>
            </footer>
        </div>
    </body>
</html>

解决步骤 #

1. 消除页面默认边距并设置根元素高度
   浏览器会给html和body默认添加少量边距，且单独设置html高度为100%时，body不会自动继承高度，需要同时指定：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

2. 让容器铺满视口并分配布局空间
   给.container设置最小高度为视口高度，并通过网格行分配规则，让header自动填充剩余空间，nav和footer保持自适应高度：

.container {
    display: grid;
    grid-template-areas: 
    "nv"
    "hd"
    "ft";
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
}

3. 优化header内容居中（可选）
   给header添加弹性布局，让内部内容在垂直和水平方向都居中，避免仅靠padding导致的布局偏移：

header {
    padding: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CTOP</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Work Sans", sans-serif;
            }
            .container {
                display: grid;
                grid-template-areas: 
                "nv"
                "hd"
                "ft";
                min-height: 100vh;
                grid-template-rows: auto 1fr auto;
            }
            nav {
                grid-area: nv;
                padding: 30px;
                display: grid;
                grid-template-areas: 
                "login signup ct ct ct ct ct ct ct ct ct ct ct ct";
                border-bottom: 5px solid #333;
            }
            .login {
                grid-area: login;
            }
            .signup {
                grid-area: signup;
            }
            a {
                width: fit-content;
                font-size: 20px;
                text-decoration: none;
            }
            header {
                padding: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .text {
                text-align: center;
            }
            header {
                grid-area: hd;
            }
            footer {
                background-color: #333;
                color: #fff;
                padding: 20px;
                text-align: center;
                grid-area: ft;
            }
        </style>
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"/>
    </head>
    <body>
        <div class="container">
            <nav>
                <a class="login" href="/login">Login</a>
                <a class="signup" href="/signup">Signup</a>
            </nav>
            <header>
                <div class="text">
                    <h1>Hi, Welcome To COTP!</h1>
                </div>
            </header>
            <footer>
                <p>&copy; 2024 Enhanced Article Page. All rights reserved.</p>
            </footer>
        </div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者yousef gaber