Home There is a white space ( empty area ) appears outside the html element in my website

Questions

There is a white space ( empty area ) appears outside the html element in my website

February 3, 2024

There is a white space ( empty area ) appears outside the html element in my website and I want to delete it or making the html element’s height equal to 100% of the window so how can I fix that? This is the problem

This is the code:

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

I tried to make the height of html element equal to 100% but it didn’t work.

>Solution :

Not sure what you’re getting at, but does this work?

        .container {
            height: 100vh;
            display: grid;
            grid-template-areas: 
            "nv"
            "hd"
            "ft";
        }