如何在一个页面上使用vh和vw CSS实现响应式网页，避免滚动条？

Question

我有一个网页，我想让它不出现滚动条，但能够在左右两端填充广告，并且大部分页面用谷歌地图填充。目前，我的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。

我想要实现的最终目标是在桌面左侧放置横幅广告，其余空间由谷歌地图填充。在移动设备上，小横幅广告放在底部，其余地方由谷歌地图填充。两者都不需要滚动。

- Ten Digit Grid

Answer 1

保持百分比宽度，并使用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）

- Pixelomo

---

inline-block 使得侧边栏和地图在同一行内显示，这是非常基础的 CSS 技巧。http://learnlayout.com/inline-block.html - Pixelomo

感谢您的快速回复。我刚刚尝试了编辑，看起来效果如下：https://www.seekadventure.net/adventureMap.html它只是将广告条向下移动，并使地图向左移动。 - Ten Digit Grid

看起来你还在使用浮点数。 - Pixelomo

抱歉，网站还在运行中，我正在评论之间进行调试。我把它留到吃完晚饭再处理... - Ten Digit Grid

Answer 2

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

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

尽量少使用浮点数。在css中使用网格系统将有助于使您的代码简短而有效。

访问https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout了解更多关于css网格布局的信息。

- 3rdsty4bl00d