Question

我正在尝试使用Boostrap 4.1创建一个webppage，其中包含标题，填充100％内容的Google地图和地图下方的页脚。

目前我在屏幕上安装所有内容时遇到了很多麻烦。它不断添加滚动条，因为页脚从页面上掉落。有没有办法让地图适合屏幕，所以它填补了标题和放大器之间的空间。页脚？

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

以下是我在jsfiddle中的当前进展：https://jsfiddle.net/11n0n6u1/1/

Answer 1

这是您的代码更新

Updated link https://jsfiddle.net/qgah75x2/

简短说明：您可以设置页眉和页脚的高度，对于地图，您可以计算如100％ - heightofheader - heightof footer。

或者你可以设置页脚标题的高度，即5％/ 5vh和地图高度90％/ 90vh

Answer 2

我已将整个内容整理到div中，我已经提供了以下课程：d-flex flex-column justify-content-between fullHeight。
fullHeight类做了一件事，它给了div height: 100vh; 这一切都是创建一个flex div并让地图填满页眉和页脚之间的所有剩余空间。

请点击此处查看我的更新小提琴：https://jsfiddle.net/od5jrfau/

Bootstrap 4：安装一个标题＆amp;页脚+谷歌地图100％高度

2 个答案: