Bootstrap 2列布局中每列的内容和谷歌地图的完整高度和宽度答案

【问题标题】：Content & Google Map full height and width of each column in Bootstrap 2-column layoutBootstrap 2列布局中每列的内容和谷歌地图的完整高度和宽度
【发布时间】：2017-03-19 19:12:23
【问题描述】：

我正在使用 Bootstrap 3.3.7 并且有一个带有固定页眉、固定页脚和 2 个响应列（sm-4 和 sm-8）的网页。

我想做的是：

让两列都填充标题和之间的其余高度页脚
右栏填满谷歌地图
当折叠到较小的屏幕时，文本 div 将自身定位在地图 div 上方

我已成功加载地图，但无法使其仅显示 1 列的全高和全宽。如果我尝试设置 width: 100% 那么它会跳转到屏幕的全宽而不是列。我还尝试将左 div 设置为右 30% 左 0，将右 div 设置为左 70% 和右 0，但这会影响移动设备的响应能力。我发现了很多其他帖子，但它们都与我试图实现的响应能力相混淆。

这是我想在更大的屏幕上实现的：

在较小的屏幕上，我希望两个 div 在页眉和页脚之间相互堆叠。

这是我的两列容器：

<div class="container">   
  <div class="row">
     <div class="col-sm-4" id="testing_employers">
       texttexttexttexttexttexttext
     </div>
     <div class="col-sm-8" id="map">
     </div>
  </div>
</div>

我的完整代码（回到最新的“工作”版本）在这个小提琴上：https://jsfiddle.net/havm4197/

【问题讨论】：

您能修复示例中的地图吗？它会更容易帮助你。
我不使用引导程序，所以我不会回答你的问题，但你应该小心小屏幕。如果您的小屏幕是触摸屏设备并且您的地图覆盖了整个屏幕，则用户可能无法滚动您的网站。我不确定谷歌地图是如何处理触摸屏设备的。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我遇到了同样的问题，除了在我的布局上我不需要页脚而且我还使用了不同的列大小排列。但我相信从概念上讲这是同样的问题。在我的情况下，我让它像这样工作：

   <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand Title</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1">
                <p>Side Text</p>
            </div>
            <div id="map" class="col-md-11 col-md-offset-1">
            </div>
        </div>
    </div>

然后我使用了这个 CSS：

#map {
    height: 100%;
    position: absolute;
}

html, body {
    height: 100%;
    padding-top: 25px;
}

.container-fluid {
    height: 100%;
    position: relative;
}

请试一试，如果也能满足您的需求，请告诉我。

【讨论】：

【解决方案2】：

请试试这个，

#left {
  min-height: 50vh;
  width: auto;
}

#map {
  min-height: 50vh;
  width: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid m-0 p-0">
  <nav class="navbar sticky-top navbar-light bg-light  m-0 p-0">
    <a class="navbar-brand" href="#">Sticky Header</a>
  </nav>
  <div class="row">
    <div class="col-sm-4 col-md-4 m-0 p-0">
      <div id="left" style="background-color:blue;">

      </div>
    </div>
    <div class="col-sm-8 col-md-4 m-0 p-0">
      <div id="map" style="background-color:red;">

      </div>

    </div>
  </div>
  <nav class="navbar sticky-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Sticky Fotter</a>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

【讨论】：