如何在一页上使用vh和vw CSS没有滚动响应式网页？

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)

Answer 2

Try using display: grid; in your parent element.

.parent-element {
    display: grid;
    grid-template-columns: 30vw 1fr;
    grid-template-rows: 100vh;
    justify-items: center;
    align-items: center;
}

Make sure to use floats as little as possible. Using grid system in css will help to make your code short and effective at the same time.

Visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout for more css grid layout.