私はこのようなブートストラップCSSのバージョン3を使用してチャットボックスを作成していますゼロ

Question

下を使用してdiv要素を配置することができません：

<div class="col-md-12 col-sm-12 col-xs-12" id="chatBox"> 
    <div class="row" id="chatHeader"> 
     <div class="col-md-10 col-sm-10 col-xs-10">Chat bot</div> 
     <div class="col-md-2 col-sm-2 col-xs-2">x</div> 
    </div> 
    <div class="row" id="chatContent"> 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
      <!--CONTENT HERE--> 
     </div> 
    </div> 
    <div class="row" id="chatFooter" style="margin-bottom: 0px;"> 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
      <div class="input-group"> 
       <textarea rows="1" class="form-control" rows="3" style="resize:none; white-space: nowrap; border-radius: 0px;"></textarea> 
       <span id="send_chat" class="input-group-addon btn btn-primary" style="background: #357ebd">Send</span> 
      </div> 
     </div> 
     <!--<div class="col-md-4 col-sm-4 col-xs-4">Send</div>--> 
    </div> 
</div> 

スタイル：

#chatBox{ 
    position: fixed; 
    bottom:0; 
    right:0; 
    height: 300px; 
    width: 300px; 
    z-index: 1001; 
    box-shadow: 3px 5px 20px #888888; 
} 

#chatHeader{ 
    padding: 10px; 
    background: green; 
    color: white; 
} 

#chatContent{ 
    height: 250px; 
    background: white; 
} 

#chatFooter{ 
    background: white; 
} 

フッターのdiv要素がある最後の行をブラウザの後ろに隠れている（私はそれが正しく表示されるようにbottom: 25px;を使用しなければならなかったことを意味する）

なぜそれはそうですか？

https://plnkr.co/edit/v0X8lSL84oNd5KNZT0TV?p=preview

更新：

は、問題を修正 chatBoxの高さを設定しない。ここplunkerです。しかし、他の問題は、divの高さを動的に設定できないことです。このプランナーを確認してください： https://plnkr.co/edit/v0X8lSL84oNd5KNZT0TV?p=preview

Answer 1

は（あなたが現在それをオーバーフロー）#chatBoxの高さを設定しないでください、あなたはそれはあなたがしたように、正確に300pxこと#chatContentと遊ぶ、それ例えばフレキシブルな高さにする必要があります。

Answer 2

主な理由の1つは、paddingがヘッダーに設定されていることです。パッディングはその下のすべてを押しています。最高の選択肢は、bottomを25pxに設定することです。私が見る限り、これはダメージを与えません。