Responsive Div Height Bootstrap 4 - html

Question

I am trying to make replica of one wordpress page using bootstrap. Original Page is looking like this
However my page is looking like this
I want remove unnecessary white space below form. My code is like below
<div class="container-login100">
<div class="wrap-login100 ">
<span class="login100-form-title p-b-32">
Make Fast Cash Anywhere
</span>
<span class="login100-form-sub-title p-b-32">
Begin Your Fast Start Steps Below...
</span>
<div class="test-progress" style="background-color:#ebebeb;">
<div class="progress-bar progress-bar-success progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:4%; background-color:#00c479;"><span id="progress"> 0% </span></div>
</div>
<form class="login100-form">
<div id="quiz">
<div class="question">
<h3>
<span id="question"> Are you looking for a way to make money online?</span>
</h3>
</div>
<ul class="text-center" style="list-style-position: inside">
<li>
<input type="radio" id="a-option" name="selector" value="1">
<label for="a-option" class="element-animation">Yes</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" name="selector" value="3">
<label for="b-option" class="element-animation">No</label>
<div class="check"><div class="inside"></div></div>
</li>
<li id="lic" style="display:none">
<input type="radio" id="c-option" name="selector" value="3">
<label for="c-option" class="element-animation">C</label>
<div class="check"><div class="inside"></div></div>
</li>
<li id="lid" style="display:none">
<input type="radio" id="d-option" name="selector" value="3">
<label for="d-option" class="element-animation">D</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
</form>
</div>
</div>
and css code is like below
.limiter {
width: 100%;
margin: 0 auto;
background-color: #000000;
}
.container-login100 {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: top;
padding: 10px;
background-image: url("../images/dollar-2.jpg");
background-color: #ebebeb;
}
.wrap-login100 {
width: 570px;
background: #fff;
border-radius: 10px;
position: relative;
}
I am using bootstrap 4 and I am looking for responsive height for wrap-login100 instead of full height. Let me know if here anyone can help me for same. Thanks!
Edit: if I remove min-height: 100vh; from container-login100, its getting responsive but my background getting cut and getting visible in half screen only.

Answer 1

Add height:max-content to .wrap-login100 in css
.limiter {
width: 100%;
margin: 0 auto;
background-color: #000000;
}
.container-login100 {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: top;
padding: 10px;
background-image: url("../images/dollar-2.jpg");
background-color: #ebebeb;
}
.wrap-login100 {
width: 570px;
background: #fff;
border-radius: 10px;
position: relative;
height: max-content;
}
<div class="container-login100">
<div class="wrap-login100 ">
<span class="login100-form-title p-b-32">
Make Fast Cash Anywhere
</span>
<span class="login100-form-sub-title p-b-32">
Begin Your Fast Start Steps Below...
</span>
<div class="test-progress" style="background-color:#ebebeb;">
<div class="progress-bar progress-bar-success progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:4%; background-color:#00c479;"><span id="progress"> 0% </span></div>
</div>
<form class="login100-form">
<div id="quiz">
<div class="question">
<h3>
<span id="question"> Are you looking for a way to make money online?</span>
</h3>
</div>
<ul class="text-center" style="list-style-position: inside">
<li>
<input type="radio" id="a-option" name="selector" value="1">
<label for="a-option" class="element-animation">Yes</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" name="selector" value="3">
<label for="b-option" class="element-animation">No</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li id="lic" style="display:none">
<input type="radio" id="c-option" name="selector" value="3">
<label for="c-option" class="element-animation">C</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li id="lid" style="display:none">
<input type="radio" id="d-option" name="selector" value="3">
<label for="d-option" class="element-animation">D</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>