内容とGoogleマップブートストラップ2列レイアウトの各列の高さと幅の合計

Question

私はブートストラップ3.3.7を使用しており、固定ヘッダー、固定フッターと2つの応答列（sm-4とsm-8 ）。

私は何をしたいのは、次のとおりです。

• は、両方の列がGoogleマップで満たさ右側の列を持っているヘッダーと フッター
• との間の高さの残りの部分を埋めてい
• 小さな画面に折りたたまれたときにテキストdivをマップdivの上に配置する

私は地図に読み込むことができましたが、 1列の幅のみ。幅：100％を設定しようとすると、列ではなく画面の全幅にジャンプします。私は左のdivを右に30％、右のdivを左に70％と右に設定しようとしましたが、これはモバイルデバイスの応答性に影響します。私は他の多くの投稿を見つけましたが、それらはすべて私が達成しようとしている反応性を混乱させます。

そして、私は2つの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; 
} 

それを試してみると、あなたのニーズに合わせて働いていた場合は私に知らせてください。