Google 贴图导致其他元素溢出正文

Question

我将 <body> 和 <html> 都设置为填充视图的整个高度和宽度 -- 它们确实如此。问题是，现在我有一个 Google 地图元素，基本上用作页面背景，其他元素溢出视图大小并被推离屏幕。

这是目前的样子。我试过调整 <html> 和 <body> 元素的大小，但这并不是真正的解决方法，而是一种 hack，因为它以其他方式破坏了布局。我也尝试过使用溢出选项。

这是您检查它时的样子，显示溢出，并且主体尺寸正确。（您必须缩小才能看到溢出。）请注意，固定导航栏上方的右侧和底部在地图元素的边缘和屏幕的限制之间显示了一个间隙。

我假设问题出在我的地图元素 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;
            }
          }

这是一个 link 代码笔，其中包含有问题的页面： https://codepen.io/redheadedmandy/pen/BVRxZE

任何关于可行修复的建议都将非常有帮助！

Answer 1

问题在于 div 和类 bottom content-container，就在 #map div.

之后

问题是，一方面，它有 width: 100%（根据 .bottom 规则），另一方面，它有

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

其中 "push" 整个文档，因此总宽度将为 100% + 20px。

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

这是第一个解决方案：

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

如果有什么不清楚的地方，请告诉我。

Google 贴图导致其他元素溢出正文

Google maps causing other elements to overflow the body

html

javascript

css

google-maps

overflow