Make 2 Divs same height as screen - html

Question

Im using bootstrap 3 with flexbox in order to achieve the output. To explain, I am creating a login screen where the left div has a background-image that completely covers the div and on the right side is the form container together with it form contents. I've provided a snippet to show what I am trying to do.
#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? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>
As you can see I am controlling the height of the layout via padding the contents on the form. Is there a way to have the same output without it being dependent on the form's height.

Answer 1

height: 100vh;
This code can make your div same height as screen

Answer 2

First thing that you need to do is to set on "column-wrapper" class:
height: 100vh;
You probably need something like this, just group the div's in a way that you like:
JSFiddle

Answer 3

Try this. You need to set elements to height 100% or 100vh. And the right part is better to make with the 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? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>