html - 使 2 个 div 与屏幕高度相同

Question

我使用bootstrap 3withflexbox来实现输出。为了解释，我正在创建一个登录屏幕，其中左侧div有一个background-image完全覆盖的div，右侧是表单容器及其表单内容。我提供了一个片段来展示我正在尝试做的事情。

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

  .column-wrapper{
    display:flex;
  }
  .login-left {
    background-image: url("assets/images/[e-mail]");
    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/[e-mail]' ?>' 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>

如您所见，我通过填充表单上的内容来控制布局的高度。有没有办法在不依赖于表单高度的情况下获得相同的输出。

标签： htmlcsstwitter-bootstrap-3flexbox

Answer 1

height: 100vh;

此代码可以使您的 div 与屏幕高度相同