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%;
    };
};
};

CodePudding user response：

add this to your .main-body class

justify-content: space-between;
min-height: 100vh;

CodePudding user response：

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.

& #map {
        z-index: 2;
        position: relative;
        height: calc(p.pxtovh(656) - 20vw);
        width: 100%;
        margin-top: 4.6%;
      };