Question

我有一个网页，我尝试不进行滚动，但在用户的任何视图中都用左侧和底部的广告填充，并在Google Map中填充大部分页面。当前，用于地图和广告块的My 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％时，它只是将我的广告块奇怪地放在了地图块下方。

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

我尝试的最终目标是左侧的横幅广告，其余空间由台式机上的Google地图填充。在底部的移动小横幅广告上，其余的为Google地图。也不滚动。

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

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

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

width: calc(75% - 20px)

Answer 2

尝试在父元素中使用display: grid;。

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

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

访问https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout以获得更多的CSS网格布局。

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

2 个答案: