时间戳

首页 > 解决方案 > How do I use vh and vw CSS for one page no scroll responsive web pages?

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

问题描述

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.

标签： htmlcssresponsive-design

解决方案

保留 % 宽度并使用 vh 表示高度。也使用 display: inline-block 代替浮动，对于布局更好。

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

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

如果它们仍然不适合同一行，那么地图周围可能会有一些默认边距，它们占用了额外的空间。您可以使用 calc() 函数以像素增量减少 % 宽度。

例如，如果您想在地图上向左填充 20px，则：

width: calc(75% - 20px)

推荐阅读