内容& Google引导式2列布局中各列的完全高度和宽度

Question

我使用的引导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>

我的完整代码(回到最近的“工作”版本)是在下面这个小提琴上：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>

​