Webpage does not fit 100vh

Question

I'm trying to create a website with navbar that is position is fixed then a main section that has 100vh, that is the only content that I have but the webpage is too tall although my web is 100vh height only so it doesn't make any sense why it has scroll.

@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        padding: 0;
    }
    
    nav {
        position: fixed;
        padding: 1rem 0;
        width: 100%;
    }
    
    nav .navbar-container {
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
    
    nav .navbar-brand {
        font-family: 'Barlow', sans-serif;
        color: #212529;
        font-size: 2.5rem;
        text-decoration: none;
        padding-top: 5px;
        margin-right: 20px;
    }
    
    nav .navbar-links {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    nav .navbar-links li {
        display: inline-block;
        margin-right: 10px;
    }
    
    nav .navbar-links li a {
        color: #212529;
        display: block;
        text-align: center;
        padding: 20px 7px;
        text-decoration: none;
        font-size: 1rem;
        line-height: 1rem;
        font-family: 'Barlow', sans-serif;
    }
    
    .dropdown .dropbtn {
        font-size: 1rem;
        outline: none;
        background-color: inherit;
        height: 100%;
        font-family: 'Barlow', sans-serif;
        margin: 0;
    }
    
    nav .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    }
    
    nav .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    nav .dropdown-content a:hover {
        background-color: #ddd;
    }
    
    nav .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .main-section {
        height: 100vh;
        background-color: #eeeeee;
    }
    
    .main-container {
        height: 100%;
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
    
    .main-content {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: fit-content;
    }
    
    .main-content h1 {
        font-family: 'Barlow', sans-serif;
        margin-bottom: 10px;
        font-size: 2rem !important;
    }
    
    .main-content p {
        margin-top: 0;
        font-family: 'Barlow', sans-serif;
    }
    
    .main-content .link-group a {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        padding: .375rem .75rem;
        font-size: 1rem;
        border-radius: 0;
        font-family: 'Barlow', sans-serif;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    
    .contact-link {
        color: #fff;
        background-color: #212529;
        border: 1px solid #212529;
    }
    
    .buy-now-link {
        color: #212529;
        border: 1px solid #212529;
    }
    
    .buy-now-link:hover {
        color: #fff;
        background-color: #212529;
        border-color: #212529;
    }

<!DOCTYPE html>

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="src/css/style.css">
        <title>Gizmo Twist | Home</title>
    </head>
    
    <body>
        <nav>
        <div class="navbar-container">
            <a class="navbar-brand" href="#">GIZMOTWIST</a>
            <ul class="navbar-links">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <div class="dropdown">
                        <a class="dropbtn">Products</a>
                        <div class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
        <section class="main-section">
            <div class="main-container">
                <div class="main-content">
                    <h1>PH NO.1 CUBE SHOP</h1>
                    <p>ITS START WITH A CROSS</p>
                    <div class="link-group">
                        <a class="contact-link" href="#">Contact Us</a>
                        <a class="buy-now-link" href="#">Buy Now</a>
                    </div>
                </div>
            </div>
        </section>
        <script src="src/js/app.js"></script>
    </html>

Browsers add default margins to divs - I can't see that you have got rid of the top and bottom margin of the .main-section div. — A Haworth, Aug 25 '22 at 07:23
the issue is margin collapsing coming for your h1 element, remove it and it should be fixed. Don't use hacky solutions like negative margin — Temani Afif, Aug 25 '22 at 09:12

score -2 · Accepted Answer · answered Aug 25 '22 at 07:18

-2

your main container is getting a margin on top. You can use negative margin to fix it

.main-container {
        height: 100%;
        width: 90%;
        margin: 0 auto;
        position: relative;
        margin-top: -30px;
    }

answered Aug 25 '22 at 07:18

buzz

896
2
10
22

1

I think the ideal way would be adding zero margin, padding in universal selector i.e. `* { margin: 0; padding: 0;}` – Dwight Aug 25 '22 at 07:26

Webpage does not fit 100vh

1 Answers1