Html 如何使用vh和vw CSS处理一页无滚动响应的网页？

我有一个网页，我试图使没有滚动，但填补任何用户的看法与广告的左侧和结尾和谷歌地图填补了大部分网页。目前，我的地图和广告块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做了一些研究和阅读

但当我将代码从使用百分比表示宽度改为使用大众，并添加一个vh以填充100%的高度时，它只是将我的广告块奇怪地放在我的地图块下方

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

---

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

保持%宽度，高度使用vh。还可以使用display:inline块代替float，这对于布局来说更好

.side col{
宽度：25%；
高度：100vh；
垂直对齐：顶部；
显示：内联块；
}
.map col{
宽度：75%；
高度：100vh；
垂直对齐：顶部；
显示：内联块；
}

尝试使用

显示：网格

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

确保尽可能少地使用
浮动
。在
css
中使用网格系统将有助于使您的代码简短有效

查看更多css网格布局。
内联块使边栏和地图显示相互内联，这是非常基本的css，感谢您的快速响应。我只是尝试了编辑，然后你看：它只是将添加移到了较低的位置，并使地图向左移动。查看该站点，你仍然使用floatsSorry live站点，仍然在评论之间使用它。我一直留到吃完晚饭。。。