Question

我同时设置了<body>和<html>来填充视图的整个高度和宽度 - 他们这样做了。问题是，现在我有一个谷歌地图元素本质上作为页面背景，其他元素溢出视图大小并被推离屏幕。

这就是它目前的样子。我已经尝试调整<html>和<body>元素的大小，但这并不是一个真正的修复，因为它以其他方式抛弃了布局。我也尝试过使用溢出选项。

这是你检查时的样子，显示溢出，以及身体尺寸正确的事实。（您必须缩小以查看溢出。）请注意，固定导航栏上方的右侧和底部都显示地图元素边缘与屏幕限制之间的间隙。

我认为这个问题与我的地图元素的CSS有关，但我不能为我的生活弄清楚它是什么。这是特定于地图的CSS：

#map {
            position: absolute;
            top: 50px;
            left: 80px;
            height: calc(100vh - 50px);
            width: calc(100vw - 80px);
            z-index: 0;
            overflow: hidden;
          }

          @media (max-width: 768px) {
            #map {
                top: 0;
                left: 0;
                height: calc(100vh - 55px);
                width: 100vw;
            }
          }

这是一个指向包含问题页面的codepen的链接： https://codepen.io/redheadedmandy/pen/BVRxZE

对可行修复的任何建议都会非常有用！

Answer 1

问题在于，在bottom content-container div之后，使用类#map的div。

问题在于，一方面，它有width: 100%（按.bottom规则），而另一方面，它有

@media (max-width: 768px) {
  .content-container.bottom {
    margin-left: 20px;
    margin-right: 20px;
  }
}

＆＃34;推＆＃34;整个文档的总宽度为100% + 20px。

解决方案是通过设置margin: 0或覆盖width: 100%来缩小尺寸。

这是第一个解决方案：

http://output.jsbin.com/meziduy/4

如果不清楚，请告诉我。

谷歌地图导致其他元素溢出身体

1 个答案: