'Eliminate scrollbar from main div in bootstrap

So I'm trying to design a register page with HTML , CSS and Bootstrap5 and i have 2 question :

In my code i have a navbar and a footer (i fix the height of footer to 55px ; and I'm not sure if it's a good practice or no !!! because i want my footer to cover the social media icon and its height became equal to the height of my navbar ) 2)i want to remove the scrollbar from register form , so the full "sign up" page will shown between my navbar and my footer and without that scrollbar here is a pic for the page that i got

and here is my code

 <html lang="en">
 <head>
     <title>Bootstrap Example</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
     <style>

         .footer {
             margin-top: auto;
             position: fixed;
             left: 0;
             bottom: 0;
             width: 100%;
             height: 55px;
             background-color: black;
             color: white;
             text-align: center;
             display: flex;
             align-items: center;
         }
     </style>
 </head>
 <body>
     <header>
         <!-- Navbar -->
         <nav class="navbar navbar-expand-lg  navbar-dark bg-dark">
             <div class="container-fluid">
                 <a class="navbar-brand" href="#">Navbar</a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item">
                             <a class="nav-link active" aria-current="page" href="#">Home</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="#">About Us</a>
                         </li>
                      <li class="nav-item">
                             <a class="nav-link" href="#" tabindex="-1" a>Login</a>
                         </li>

                     </ul>
                 </div>
             </div>
         </nav>
     </header>
   <main  style="background-color: #eee;">
   <div class="container h-100">
     <div class="row d-flex justify-content-center align-items-center h-100">
       <div class="col-lg-12 col-xl-11">
         <div class="card text-black" style="border-radius: 25px;">
           <div class="card-body p-md-5">
             <div class="row justify-content-center">
               <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">

                 <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>

                 <form class="mx-1 mx-md-4">

                   <div class="d-flex flex-row align-items-center mb-4">
                     <i class="fas fa-user fa-lg me-3 fa-fw"></i>
                     <div class="form-outline flex-fill mb-0">
                       <input type="text" id="form3Example1c" class="form-control" />
                       <label class="form-label" for="form3Example1c">Your Name</label>
                     </div>
                   </div>

                   <div class="d-flex flex-row align-items-center mb-4">
                     <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
                     <div class="form-outline flex-fill mb-0">
                       <input type="email" id="form3Example3c" class="form-control" />
                       <label class="form-label" for="form3Example3c">Your Email</label>
                     </div>
                   </div>

                   <div class="d-flex flex-row align-items-center mb-4">
                     <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
                     <div class="form-outline flex-fill mb-0">
                       <input type="password" id="form3Example4c" class="form-control" />
                       <label class="form-label" for="form3Example4c">Password</label>
                     </div>
                   </div>
           <div class="d-flex flex-row align-items-center mb-4">
             <i class="fas fa-key fa-lg me-3 fa-fw"></i>
             <div class="form-outline flex-fill mb-0">
               <input type="password" id="form3Example4cd" class="form-control" />
               <label class="form-label" for="form3Example4cd">Repeat your password</label>
             </div>
           </div>

           <div class="form-check d-flex justify-content-center mb-5">
             <input
               class="form-check-input me-2"
               type="checkbox"
               value=""
               id="form2Example3c"
             />
                     <label class="form-check-label" for="form2Example3">
                       I agree all statements in <a href="#!">Terms of service</a>
                     </label>
                   </div>

                   <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                     <button type="button" class="btn btn-primary btn-lg">Register</button>
                   </div>

                 </form>

               </div>
               <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">

                 <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp" class="img-fluid" alt="Sample image">

               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </main>
     <footer class=" footer   ">
             <div class="container-fluid  position-b-0">
                 <div class="row">
                     <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                         <h6>&copy; 2022 - . All right reserved.</h6>
                     </div>

                     <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                         <a style="color: #3b5998 ;" href="#" target="_blank"><i class="fa fa-3x fa-facebook-f fa-lg"></i></a>
                         <a style="color: #55acee;" href="#"><i class="fa fa-3x fa-twitter fa-lg"></i></a>
                         <a style="color: #ac2bac;" href="#!"><i class="fa fa-3x fa-instagram fa-lg"></i></a>
                         <a style="color: #dd4b39;" href="#"><i class="fa fa-3x fa-google-plus fa-lg"></i></a>

                     </div>
                 </div>
             </div>
         </footer>
 </body>
 </html>

Solution 1:^[1]

To eliminate the scrollbar you can add,

body {
  overflow: hidden;
}

but it will make unable to reach the content at the bottom. So it is better to set the total content to 100vh or less.

Solution 2:^[2]

heres the sample for you. https://codepen.io/CrystalRcodes/pen/wvPQBdZ

If you want to hide the scrollbar you can use below code.

body {
  overflow-y:scroll;
}

body::-webkit-scrollbar {
  display:none;
}

but if you want to view the entire form on your computer you can use a specific height or use your specific viewport or like 100vh . But its gonna be tricky for other viewport.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	RUNR
Solution 2

'Eliminate scrollbar from main div in bootstrap

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]