Overflow when using 100vh

Issue

I set my grid-view height to 100vh. My grid-view consists of two divs, first div for image and second for form. This is a partial of my CSS code:

* {
    box-sizing: border-box;
}

html {
    font-family: "Urbanist", sans-serif;
}

body {
    margin: 0;
    background-image: url(../img/bgImg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: rgba(255,255,255,1);
}

.grid-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 50px;
    height: 100vh;
}

img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

This is my HTML code:

<div class="grid-view">
        <!-- Image Section -->
        <div class="img-section">
            <img src="img/imgGS.jpg" alt="GS Image"/>
        </div>
        <!-- End Image Section -->

        <!-- Form Section -->
        <form method="get" action="">
            <!-- Top Section -->
            <div class="header">
                <header>
                    <h1>
                        GAB SECURITY
                    </h1>
                </header>
            </div>
            <!-- End Top Section -->

            <!-- Middle Section -->
            <div class="middle-section">
                <!-- First Row -->
                <div class="first-row">
                    <h1>
                        Create an account
                    </h1>
                    <p>
                        Enter your credentials to create an account
                    </p>
                </div>
                <!-- End First Row -->

                <!-- Second Row -->
                <div class="second-row">
                    <label>
                        Email Address
                    </label>
                    <input type="email" id="email-address" name="eAddress">
                    <div class="name-section">
                        <div class="first-name-div">
                            <label>
                                First Name
                            </label>
                            <input type="text" id="first-name" name="fName">
                        </div>
                        <div class="last-name-div">
                            <label>
                                Last Name
                            </label>
                            <input type="text" id="last-name" name="lName">
                        </div>
                    </div>
                    <label>
                        Password
                    </label>
                    <input type="password" id="user-password" name="password">

                </div>
                <!-- End Second Row -->

                <!-- Third Row -->
                <input type="button" id="create-acc-btn" value="Sign Up">
                <!-- Third Row -->
            </div>
            <!-- End Middle Section -->

            <!-- Bottom Section -->
            <div class="footer">
                <footer>
                    Already have an account? <span>Sign In</span>
                </footer>
            </div>
            <!-- End Bottom Section -->
        </form>
        <!-- End Form Section -->

    </div>

The problem is when I zoom out it overflow and when I zoom in the content fit the whole page nicely. This is the picture of it.

My intention is to fit the whole content in one page (no vertical scroll) even though the size of screen resolution is different.

My opinion is I did inspect the website and I think the one that causing the overflow is the image and I try to change the height to min-height 100vh but still didn't work. I'm not sure whether my opinion is right or wrong.

Solution

Here is what you should change in your CSS

/* 
 * You can add overflow:hidden to your html element to prevent 
 * a scroll bar altogether, but only do this if you are absolutely sure 
 * that the page will resize dynamically well enough not to need it.  
 * You should also qualify the selector as being just for the
 * home page so it doesn't affect other pages
 */

html {
  font-family: "Urbanist", sans-serif;
  overflow: hidden;
}

/* Make the body element height 100vh */
body {
  margin: 0;
  background-image: url(../img/bgImg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, 1);
  height: 100vh;
}

/* 
 * Make grid-view's height 100% - assuming it is an immediate
 * child of <body>
 */

.grid-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 50px;
  height: 100%;
}

/* 
 * Change the image to have max-height set.
 * You want it to be 100vh minus your padding on top and bottom.
 */

img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: calc(100vh - 100px);
}

You may also want to choose one of the new vh units like svh, dvh, or lvh for mobile. These will account for disapearing URL bars on mobile browsers or bottom tab bars. svh will give you the height inside those additional elements, lvh will give you the size without them, and dvh will change dynamically when they appear or disappear. Use normal vh units as a fallback. Lastly, since you are taking a value (padding) and doing a calculation with it, it would be a good idea to use a custom property (CSS variable) for that. Like this:

:root {
  --hero-img-padding: 50px;
}

*,
:before,
:after {
  box-sizing: inherit;
  background-repeat: no-repeat;
}

:before,
:after {
  vertical-align: inherit;
  text-decoration: inherit;
}

html {
  box-sizing: border-box;
  font-family: "Urbanist", sans-serif;
  font-size: 1em;
  line-height: 1.4;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-image: url('../img/bgImg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, 1);
  height: 100vh;
  height: 100dvh;
}

.grid-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: var(--hero-img-padding);
  height: 100%;
}

.img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: calc(100vh - (var(--hero-img-padding) * 2));
  max-height: calc(100dvh - (var(--hero-img-padding) * 2));
}

I created a little demo on CodePen with a placeholder image to show it working. Here is the link for the full-size live demo without the code. Hope this helps!

Answered By - Stephen M Irving