Question

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

我想做的是：

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

我已设法加载到地图中，但无法让它仅显示1列的完整高度和宽度。如果我尝试设置宽度：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>

我的完整代码（回到最近的＆＃34;工作＆＃34;版本）就在这个小提琴上：https://jsfiddle.net/havm4197/

Answer 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;
}

请尝试一下，让我知道是否也能满足您的需求。

Answer 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>

内容＆amp; Google Map在Bootstrap 2列布局中的每个列的完整高度和宽度

2 个答案: