Landing page full width and height (no scrolling)

Hi I am stuck with a peculiar problem. I need to create for my client a landing page as from jpg included in private section.

The landing page should appear full screen with no scrolling and should be made of some text + below it a full width image + a socket with credits.

I used a blank template page and I created a color section 100% height containing 3 flex columns 1/1. The color section was set to contain 100% width columns as from your indication ( ), because image and socket must be 100% width. Each element has an ID to be able to set different heights and padding
The flex columns contain:
1) text (it starts however below the top, let’s say 1/4 below)
2) full width image (original size 2500px*587px)
3) socket-like div for credits

Each column as a specific % of height so that summing their height and vertical paddings the total should be 100%. In this sense it should appear all in the screen without any scrolling effect

However with some screen dimensions the socket is well over the screen bottom, while in others the socket appears below. How can I fix it?

This is the code

#landing-page-container .container {
  width: 100% !important;
  min-width: 100%;
  padding: 0;
  margin: 0;
}

#landing-col-text {
    padding-top:8%;
    padding-left:10%;
    padding-right:10%;
    padding-bottom:8%;
    height:44vh;
}

#landing-image {
    overflow-y: hidden;
    height:39vh;
    margin-bottom:0px!important;
}
#landing-footer {
    background-color:#3B3C3C; 
    min-height:1%!important;
    margin-top:0px;
    padding:0 5%;
}
    #landing-footer {
        max-height:40px;
        }
    #landing-footer  p {
        font-size:14px;
        line-height:20px;
    }
@media only screen and (max-width: 1680px) {
    #landing-col-text {
       padding-top:6%;
       padding-bottom:0; 
    }   
    #landing-image {
        height:35%;
        margin-top:1%;
    }

}    
@media only screen and (max-width: 468px) {
    #landing-col-text {
       padding-top:20%;
       padding-bottom:0; 
       margin-top:15%;
    }   
    #landing-image {
        margin-top:20%;
    }

}