How do I use vh and vw CSS for one page no scroll responsive web pages?

Question

I have a webpage in which I am trying to make no scroll but fill whatever view the user has with an advertisement on the left and end and a Google Map filling most of the page. Currently, My CSS for the map and the advertisement block look like this:

.side-col{
        width: 25%;
        float: left;
      }

      .map-col{
        width: 75%;
        float: right;
        padding-left: 20px;
      }
      @media(max-width: 991px){
        .side-col{
          width: 30%;
          float: left;
        }

        .map-col{
          width: 70%;
          float: right;
        }
      }

I did some research and did some reading on vh and vw

But when I changed my code from using percentage for width to using vw and adding in a vh to fill 100% of the height it just placed my advertisement block oddly below my map block.

You can find my whole CSS file here on the webpage.

The end goal I am attempting is a banner ad on the left-hand side with the rest of the space filled by the google map on the desktop. On mobile small banner ad at the bottom with the rest the google map. No scrolling on either.

Answer 1

Keep the % widths and use vh for for heights. Also use display: inline-block instead of floats, much better for layouts.

.side-col{
  width: 25%;
  height: 100vh;
  vertical-align: top;
  display: inline-block;
}

.map-col{
  width: 75%;
  height: 100vh;
  vertical-align: top;
  display: inline-block;
}

if they dont fit on the same row still then there may be some default margins around the map which are taking up extra space. You can use the calc() function to reduce the % widths in pixel increments.

For example if you want to have padding left of 20px on the map then:

width: calc(75% - 20px)