Why am i getting blank space at the bottom when height increases? - css

Question

Currently, I am trying to make my site responsive.But even though now it works well for (1440x760) but when the height increases i get a blank position at the end.
Why is it appearing and how can i get rid of that here and in future instances.
Live Site Link - https://mustakabsarkhan.github.io/ip-address-tracker/
SCSS Code -
html{
box-sizing: border-box;
font-size: 100%;
};
*,
*::before,
*::after{
box-sizing: inherit;
margin: 0;
padding: 0;
};
body{
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
font-family: 'Rubik', sans-serif;
background: url(../../images/pattern-bg.png);
};
.main-body{
display: flex;
flex-direction: column;
text-align: center;
& .ip-header{
margin-top: 2%;
color: p.color(simple-white);
font-size: p.pxtovw(35);
};
& .search-bar{
display: flex;
justify-content: center;
text-align: left;
& >input{
padding-left: 20px;
};
& #searchbox{
height: p.pxtovh(50);
width: p.pxtovw(490);
//margin-right: 6.3%;
margin-left: 4%;
border-radius: 13px 0 0 13px;
border: none;
margin-top: 1%;
};
& .searchbox-button{
margin-top: 1%;
height: p.pxtovh(50);
width: p.pxtovw(50);
background-color: black;
border: none;
border-radius: 0 13px 13px 0;
margin-right: 55px;
};
& button:active {
opacity: 0.7;
transform: translateY(1px);
border: inherit;
border: 2px solid black;
};
};
& .main-container{
width: 100%;
& .content-bar{
background: p.color(simple-white);
display: flex;
border-radius: 15px;
justify-content: center;
width: 74%;
margin-left: 13%;
padding: 2%;
text-align: left;
margin-top: 2%;
gap:3%;
& .line{
border-left: p.pxtovw(2) solid p.color(dark-grey);
height: p.pxtovh(90);
margin-top: 1%;
};
& >div>label{
font-size: p.pxtovw(14);
color: p.color(dark-grey);
};
& >div>p{
font-size: p.pxtovw(24);
};
};
& .sub-content-bar{
display: flex;
flex-direction: column;
& .sub-content-bar-content{
z-index: 9;
position: absolute;
display: flex;
justify-content: center;
gap:10%;
text-align: center;
margin-top: 1%;
padding: 1%;
background-color: p.color(simple-white);
width: 50.6%;
margin-left: 24.5%;
border-radius: 15px;
& .flags>img{
margin-top: 5px;
width: p.pxtovw(64);
};
& >div>label{
font-size: p.pxtovw(14);
color: p.color(dark-grey);
};
& >div>p{
font-size: p.pxtovw(24);
};
};
};
& #map {
z-index: 2;
position: relative;
height: calc(656px - 20vw);
width: 100%;
margin-top: 4.6%;
};
};
};

Answer 1

add this to your .main-body class
justify-content: space-between;
min-height: 100vh;

Answer 2

Changing map height with vh has helped to solved the issue. Previously, due to using height: calc(656px - 20vw) the map couldn't get bigger than 656px.
Also Thanks to #AdamUK73 for pointing out the exact reason.
Solution Code-
& #map {
z-index: 2;
position: relative;
height: calc(p.pxtovh(656) - 20vw);
width: 100%;
margin-top: 4.6%;
};