Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

Question

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

I am struggling with the alignment of a login page form that needs to be centered both horizontally and vertically, while allowing for slight scrolling down to accommodate the navigation bar height. I have attempted to adjust the classes and style heights, but it seems to affect the form's positioning in the center of the page. Any guidance on resolving this issue would be highly appreciated.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">

    <div class="container">

        <a class="navbar-brand" href="login.php">Web App</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">

            <ul class="navbar-nav ml-auto">

                <li class="nav-item">
                    <a class="nav-link" href="splash.php">Choose Login</a>
                </li>

            </ul>

        </div>

    </div>

</nav>

<section id="cover" class="min-vh-100">
        <div id="cover-caption">
            <div class="container">
                <div class="row text-white">
                    <div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
                        <h1 class="display-4 py-2 text-truncate">Student Login.</h1>
                        <div class="px-2">
                            <form action="" method="POST" autocomplete="off" class="justify-content-center">
                                <div class="form-group">
                                    <label class="sr-only" for="studentnumber">Student Number:</label>
                                    <input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password">Password:</label>
                                    <input type="password" class="form-control" name="password" placeholder="Password">
                                </div>
                                <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


<style>
    #cover {
        background-size: cover;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        position: relative;
    }

    #cover-caption {
        width: 100%;
        position: relative;
        z-index: 1;
    }

    /* only used for background overlay not needed for centering */
    form:before {
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: -1;
        border-radius: 10px;
    }
</style>

html css forms

Answer 1

Answer №1

Try incorporating the fixed-top class to address your issue. Another alternative is to utilize flexbox instead of the min-vh-100 class.

   #cover {
     background-size: cover;
     height: 100%;
     text-align: center;
     display: flex;
     align-items: center;
     position: relative;
   }

   #cover-caption {
     width: 100%;
     position: relative;
     z-index: 1;
   }

   /* only used for background overlay not needed for centering */
   form:before {
     content: '';
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.3);
     z-index: -1;
     border-radius: 10px;
   }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top fixed-top">

  <div class="container">

    <a class="navbar-brand" href="login.php">Web App</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

...
              <input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
              <label class="sr-only" for="password">Password:</label>
              <input type="password" class="form-control" name="password" placeholder="Password">
            </div>
            <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

Try incorporating the fixed-top class to address your issue. Another alternative is to utilize flexbox instead of the min-vh-100 class.

   #cover {
     background-size: cover;
     height: 100%;
     text-align: center;
     display: flex;
     align-items: center;
     position: relative;
   }

   #cover-caption {
     width: 100%;
     position: relative;
     z-index: 1;
   }

   /* only used for background overlay not needed for centering */
   form:before {
     content: '';
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.3);
     z-index: -1;
     border-radius: 10px;
   }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top fixed-top">

  <div class="container">

    <a class="navbar-brand" href="login.php">Web App</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

...
              <input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
              <label class="sr-only" for="password">Password:</label>
              <input type="password" class="form-control" name="password" placeholder="Password">
            </div>
            <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

Answer №2

You might want to consider using mine

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stack Overflow</title>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="login.php">Web App</a>

        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="splash.php">Choose Login</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section id="cover" class="min-vh-100">
      <div id="cover-caption">
        <div class="container">
          <div class="row text-white">
            <div
              class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4"
            >
              <h1 class="display-4 py-2 text-truncate">Student Login.</h1>
              <div class="px-2">
                <form
                  action=""
                  method="POST"
                  autocomplete="off"
                  class="justify-content-center"
                >
                  <div class="form-group">
                    <label class="sr-only" for="studentnumber"
                      >Student Number:</label
                    >
                    <input
                      type="number"
                      min="1"
                      class="form-control"
                      name="studentnumber"
                      placeholder="Student Number"
                    />
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="password">Password:</label>
                    <input
                      type="password"
                      class="form-control"
                      name="password"
                      placeholder="Password"
                    />
                  </div>
                  <button
                    type="submit"
                    name="submit"
                    class="btn btn-primary btn-lg"
                  >
                    Submit
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

CSS:

#cover {
  background-size: cover;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  position: relative;
}

#cover-caption {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* only used for background overlay not needed for centering */
form:before {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  border-radius: 10px;
}

I hope you find this useful! ^_^

Answer 4

You might want to consider using mine

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stack Overflow</title>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="login.php">Web App</a>

        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="splash.php">Choose Login</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section id="cover" class="min-vh-100">
      <div id="cover-caption">
        <div class="container">
          <div class="row text-white">
            <div
              class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4"
            >
              <h1 class="display-4 py-2 text-truncate">Student Login.</h1>
              <div class="px-2">
                <form
                  action=""
                  method="POST"
                  autocomplete="off"
                  class="justify-content-center"
                >
                  <div class="form-group">
                    <label class="sr-only" for="studentnumber"
                      >Student Number:</label
                    >
                    <input
                      type="number"
                      min="1"
                      class="form-control"
                      name="studentnumber"
                      placeholder="Student Number"
                    />
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="password">Password:</label>
                    <input
                      type="password"
                      class="form-control"
                      name="password"
                      placeholder="Password"
                    />
                  </div>
                  <button
                    type="submit"
                    name="submit"
                    class="btn btn-primary btn-lg"
                  >
                    Submit
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

CSS:

#cover {
  background-size: cover;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  position: relative;
}

#cover-caption {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* only used for background overlay not needed for centering */
form:before {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  border-radius: 10px;
}

I hope you find this useful! ^_^

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

Answer №1

Answer №2

Similar questions

Guide on how to trigger a pop-up modal to open a new webpage by clicking on a hyperlink

Overflowing dropdown menus on a dynamic navigation bar

Why isn't my axios login get request functioning as expected?

The React Navbar fails to appear when using React JS

Utilizing a series of regulations in Codeigniter for form validation

What is the best way to position my content next to my sticky sidebar for optimal visibility?

Replace the default disc icon with a more detailed icon for UL lists

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

In my Ionic/Angular project, I'm attempting to showcase two columns side by side in a row. However, the layout seems to be stacking them on top of each other with the

What are the essential Bootstrap CSS and JavaScript files that need to be connected to our HTML document?

Positioning an anchor element over an image in Internet Explorer (IE)

Ways to show or conceal content using only CSS

Unexpected white space appears at the bottom of the page when rotating the device in iOS Safari

What is the best way to set a newly selected HTML option as the first choice?

Tips for choosing a block using Puppeteer

The code functions perfectly on JSfiddle, but for some reason it halts when implemented on

Refresh the content with an embedded iframe

Creating a column heading that appears at the top of each column break with the help of CSS column-count

Combining CSS to Align Two Form Fields Side by Side

What is the best way to enhance specific sections of Django content by incorporating <span> tags, while maintaining the original paragraph text format?