The essence of what. There is a form. But the form is not simple, but with tabs. With tabs Authorization, Registration, Rules.
I found in Google how to align the block to the center of the page. But the problem is that if you switch tabs (and they are of different heights), the block changes size.
You can see it here: https://www.codeply.com/go/zjrSL7SkaE
If you click on the Rules, the form will be higher and the tab headings jump up. I mean, the user will have to chase the block to switch the tab.
How can you make so that the form remains in place (that is, in the center), but the height changed down the page.
Maybe it should be done differently.
答案 0 :(得分：0)
也许不是最好的方法，但是它可能解决了您的问题，您可以删除align类，使选项卡停留在页面顶部，然后将margin-top添加到容器中，向下推时，您可以使用vh而不是px作为单位，以使边距覆盖视口高度的特定部分。
全屏查看
.form-1{
margin-top: 35vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container h-100">
<div class="row justify-content-center form-1 text-center form-1 h-100">
<div class="col-6">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#signInTab">Авторизация</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#signUpTab">Регистрация</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#termsTab">Правила сервиса</a>
</li>
</ul>
<div class="tab-content">
<div id="signInTab" class="container tab-pane active">
<br>
<form action="">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">
<i class="fas fa-envelope"></i>
</span>
</div>
<input type="email" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Введите Вашу почту">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">
<i class="fas fa-unlock-alt"></i>
</span>
</div>
<input type="password" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Введите Ваш пароль">
</div>
<div class="row">
<div class="col-6">
<div class="custom-control custom-checkbox ">
<input type="checkbox" class="custom-control-input" id="singInTabRememberMe" name="example1">
<label class="custom-control-label" for="singInTabRememberMe">
запомнить меня
</label>
</div>
</div>
<div class="col-6 text-center pl-0 pr-0">
<a href="#" class="brand-link">Не помню пароль</a>
</div>
</div>
<button type="submit" class="float-right brand-nav-btn btn left-filling">
<i><img src="./img/login2.png" alt=""></i>
<span>
Вход
</span>
</button>
</form>
</div>
<div id="signUpTab" class="container tab-pane fade">
<br>
<form>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">
<i class="fas fa-envelope"></i>
</span>
</div>
<input type="email" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Введите Вашу почту">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">
<i class="fas fa-unlock-alt"></i>
</span>
</div>
<input type="password" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Введите Ваш пароль">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">
<i class="fas fa-unlock-alt"></i>
</span>
</div>
<input type="password" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Повторите пароль">
</div>
<div class="custom-control custom-checkbox ">
<input type="checkbox" class="custom-control-input" id="chBxTermsArgee" name="">
<label class="custom-control-label" for="chBxTermsArgee">
согласен с
<a class="brand-link" id="serviceTermsLink" href="#">
правилами сервиса
</a>
</label>
</div>
<button type="submit" class="float-right brand-nav-btn btn left-filling">
<i><img src="./img/login2.png" alt=""></i>
<span>
Отправить
</span>
</button>
</form>
</div>
<div id="termsTab" class="container tab-pane fade">
<br>
<hr>
<div class="service-terms">
<h3>Правила предоставления услуги</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, cumque necessitatibus impedit delectus ratione harum nisi nemo minus eaque, exercitationem consequuntur. Repellat tempore molestias dicta. Recusandae quam rem ducimus temporibus! Doloribus
quibusdam ullam atque possimus sequi libero inventore natus amet facilis, minima dolore molestias accusantium nam omnis, delectus totam fuga quae nemo asperiores laboriosam veritatis! Ipsam aperiam ipsa nulla vitae? Temporibus nulla rem
aspernatur eum quidem minima voluptatum corporis libero explicabo. Impedit distinctio deleniti labore exercitationem quae repudiandae consequatur? Ullam eveniet quo exercitationem! Sint ab, nihil placeat ea omnis libero! Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Cum, voluptatum perspiciatis molestias reiciendis blanditiis pariatur in sunt velit? Labore assumenda repellendus sint molestiae debitis esse itaque totam distinctio perferendis reiciendis?
</p>
</div>
</div>
</div>
</div>
</div>
</div>