Сделайте 2 деления такой же высоты, как экран - PullRequest
Новая
       15

Сделайте 2 деления такой же высоты, как экран

0 голосов
/ 25 февраля 2020

Я использую bootstrap 3 с flexbox для достижения результата. Для объяснения я создаю экран входа в систему, где на левом div есть background-image, который полностью покрывает div, а на правой стороне находится контейнер формы вместе с содержимым формы. Я предоставил фрагмент, чтобы показать, что я пытаюсь сделать. 

#page-login-template {
  margin-top: -32px;
  

  .column-wrapper{
    display:flex;
  }
  .login-left {
    background-image: url("assets/images/web_login@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .login-right {
    padding: 0 100px;
    .login-logo {
    padding:99px 0;
    }
    h4 {
      font-family: Poppins;
      font-size: 18px;
      color: #0392cc;
    }
    .form-container {
      padding: 20px 0;
      
      .form-part-group {
        padding: 10px 0;
      }
      [type=email],
      [type=password],[type=text] {
        height: 40px;
        font-size: 18px;
        font-family: Poppins;
        color: #333;
      }
      [type=password],[type=text]{
        border-right:0;
      }
      .input-group-addon {
        background-color: white;
        border-right: 1px solid #e9e9e9;
        border-left:0;
        border-top:1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
      }
      i{
        font-size:18px;
      }
      .btn-login{
        height:54px;
        font-size:16px;
        font-family:Poppins;
        color:#fff;
        background:#0570B6;
        box-shadow: 0px 3px 6px #00000029;
      }
      .btn-login:hover{
        background:#0570B6;
      }
    }
    .form-container-2{
      padding:20px 0;
      p{
        font-family: Poppins;
        font-size: 12px;
        color:#333;
        font-weight:bold;
      }
      a{
        color:#0392CC
      }
    }
    .form-container-3{
        padding-top:180px;
      p{
        font-family: Poppins;
        font-size: 11px;
        color:#333;
        font-weight:bold;
      }
      a{
        color:#0392CC
      }
    }
  }
}
<div id="page-login-template" class="container-fluid">
    <div class="row column-wrapper">
        <div class="col-lg-7 login-left"></div>
        <div class="col-lg-5 login-right">
            <div class="row login-logo text-center">
                <img src='<?= get_stylesheet_directory_uri() . '/assets/images/logo/logo@2x.png' ?>' width="50%">
            </div>
            <h4 class="text-center">Login to My Account</h4>
            <div class="row form-container">
                <form class="form-horizontal">
                    <div class="row">
                        <div class="form-part-group col-lg-12">
                            <input id="email" type="email" class="form-control form-input-group email-input" data-error-required="This field is required" data-class-focus="email-input" placeholder="Email">
                            <div id="email" class="error-block"></div>
                        </div>
                    </div>
                    <div class="row form-part-group">
                        <div class="input-group col-lg-12 password-input">
                            <input id="password" type="password" class="form-control form-input-group" data-error-required="This field is required" data-class-focus="password-input" placeholder="Password">
                            <div class="input-group-addon">
                                <i class="fa fa-eye-slash password-eye hide-password "></i>
                            </div>
                        </div>
                        <div id="password" class="error-block"></div>
                    </div>
                    <div class="row">
                        <div class="form-part-group col-lg-12">
                            <button type="button" class="btn btn-block btn-login" disabled>Log In</button>
                        </div>
                    </div>
                </form>
                <div class="row form-container-2 text-center">
                    <p>Don't have an account yet? <a href="<?= site_url() . '/sign-up' ?>">Create An Account Now</a></p>
                </div>
                <div class="row form-container-3 text-center">
                    <p>Copyright © 2020. All Rights Reserved.</p>
                    <p><a href="<?= site_url() . '/terms-and-conditions' ?>">Terms & Conditions</a> and <a href="<?= site_url() . '/data-privacy-policy' ?>">Data Privacy Policy</a>
                </div>
            </div>
        </div>
    </div>
</div>

Как видите, я контролирую высоту макета, заполняя содержимое формы. Есть ли способ получить тот же вывод без зависимости от высоты формы.

Ответы [ 3 ]

0 голосов
/ 25 февраля 2020

Первое, что вам нужно сделать, это установить класс «column-wrapper»: 

height: 100vh;

Возможно, вам нужно что-то подобное, просто сгруппируйте div так, как вам нравится:

JSFiddle

0 голосов
/ 25 февраля 2020

Попробуйте это. Вам нужно установить элементы на высоту 100% или 100vh. А правильную часть лучше сделать с помощью flexbox. 

html,
body {
    height: 100%;
}

#page-login-template{
    height: 100%;
}

.column-wrapper {
    display: flex;
    height: 100%;
}

.login-left {
    background-image: url("https://source.unsplash.com/user/erondu/1600x900");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.login-logo{
  padding-top:100px;
}

.login-right {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
}

h4 {
    font-family: Poppins;
    font-size: 18px;
    color: #0392cc;
}

.form-container {
    padding: 20px 0;
}

.form-part-group {
    padding: 10px 0;
}

[type=email],
[type=password],
[type=text] {
    height: 40px;
    font-size: 18px;
    font-family: Poppins;
    color: #333;
}

[type=password],
[type=text] {
    border-right: 0;
}

.input-group-addon {
    background-color: white;
    border-right: 1px solid #e9e9e9;
    border-left: 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}

.input-group-addon  i {
    font-size: 18px;
}

.btn-login {
    height: 54px;
    font-size: 16px;
    font-family: Poppins;
    color: #fff;
    background: #0570B6;
    box-shadow: 0px 3px 6px #00000029;
}

.btn-login:hover {
    background: #0570B6;
}

.form-container-2 {
    padding: 20px 0;
}

.form-container-2 p {
    font-family: Poppins;
    font-size: 12px;
    color: #333;
    font-weight: bold;
}

.form-container-2 a {
    color: #0392CC
}

.form-container-3 p {
    font-family: Poppins;
    font-size: 11px;
    color: #333;
    font-weight: bold;
}

.form-container-3 a {
    color: #0392CC
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<div id="page-login-template" class="container-fluid">
    <div class="row column-wrapper">
        <div class="col-md-7 login-left"></div>
        <div class="col-md-5 login-right">
            <div class="row login-logo text-center">
                <img src='https://source.unsplash.com/random/200x200>' height="150">
            </div>
            <div class="form-container">
                <h4 class="text-center">Login to My Account</h4>
                <form>
                    <div class="form-group">
                        <input id="email" type="email" class="form-control form-input-group email-input"
                            data-error-required="This field is required" data-class-focus="email-input"
                            placeholder="Email">
                        <div id="email" class="error-block"></div>

                    </div>
                    <div class="form-group">
                        <input id="password" type="password" class="form-control form-input-group"
                            data-error-required="This field is required" data-class-focus="password-input"
                            placeholder="Password">
                        <div class="input-group-addon">
                            <i class="fa fa-eye-slash password-eye hide-password "></i>
                        </div>
                        <div id="password" class="error-block"></div>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-block btn-login" disabled>Log In</button>
                    </div>
                </form>
            </div>
            <div>
                <div class="row form-container-2 text-center">
                    <p>Don't have an account yet? <a href="<?= site_url() . '/sign-up' ?>">Create An Account Now</a></p>
                </div>
                <div class="row form-container-3 text-center">
                    <p>Copyright © 2020. All Rights Reserved.</p>
                    <p><a href="<?= site_url() . '/terms-and-conditions' ?>">Terms & Conditions</a> and <a
                            href="<?= site_url() . '/data-privacy-policy' ?>">Data Privacy Policy</a>
                </div>
            </div>
        </div>
    </div>
</div>
0 голосов
/ 25 февраля 2020 
height: 100vh;

Этот код может сделать ваш div такой же высоты, как экран

...