html - 如何将 vh 和 vw CSS 用于一页无滚动响应网页？

Question

我有一个网页，我试图在其中不滚动，而是在左侧和末尾用广告填充用户的任何 View ，并用谷歌地图填充大部分页面。目前，我的 map 和广告 block 的 CSS 如下所示:

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

我做了一些研究并阅读了一些关于 vh 和 vw 的资料

但是当我将我的代码从使用宽度百分比更改为使用 vw 并添加一个 vh 以填充 100% 的高度时，它只是将我的广告 block 奇怪地放在我的 map block 下方。

你可以找到我的整个 CSS 文件 here在网页上。

我尝试的最终目标是在左侧放置横幅广告，其余空间由桌面上的谷歌地图填充。在底部的移动小横幅广告上，其余为谷歌地图。也没有滚动。

Answer 1

保留 % 宽度并使用 vh 表示高度。还可以使用 display: inline-block 而不是 float，这对于布局来说要好得多。

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

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

如果它们仍然不能放在同一行，则 map 周围可能有一些默认边距占用了额外空间。您可以使用 calc() 函数以像素增量减少 % 宽度。

例如，如果你想在 map 上留出 20px 的左边距，那么:

宽度:计算(75% - 20px)