Попытка получить мою страницу, чтобы не было вертикальной прокрутки, которая является высотой панели навигации - PullRequest
Новая
       0

Попытка получить мою страницу, чтобы не было вертикальной прокрутки, которая является высотой панели навигации

0 голосов
/ 08 марта 2020

У меня есть страница входа, которая содержит форму, которая центрирована как по горизонтали, так и по вертикали, но вы можете немного прокрутить высоту панели навигации. Я попытался изменить классы, а также высоту в стиле, но это портит то, как форма расположена в центре страницы. Любая помощь будет высоко ценится. 

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

Ответы [ 2 ]

0 голосов
/ 08 марта 2020

Вы также можете попробовать мой

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>
    <!-- .static-top replaced with .fixed-top -->
    <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;
}

Надеюсь, это поможет ^ _ ^

0 голосов
/ 08 марта 2020

Используйте fixed-top класс для решения вашей проблемы. Или используйте flexbox вместо 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>

    <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...