Html 无法使用底部零放置div元素

我正在使用bootstrap css版本3创建一个聊天盒，如下所示：

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

页脚div隐藏在浏览器后面的最后一行（我的意思是我必须使用

bottom:25px；

使其正确显示）

为什么会这样？这是普朗克：

更新：

---

未设置聊天盒的高度已修复此问题。但另一个问题是我无法动态设置div的高度。请检查此选项：

主要原因之一是您的页眉设置了

填充。垫子把下面的东西都压下来了。我想最好的选择是将
底部设置为
25px
。就我所见，这不会造成任何损坏。
不要设置
#chatBox
的高度（您当前溢出了它），但如果您需要它精确地设置为
300px
，使用
#chatContent
并将其设置为灵活的高度，例如。
我目前正在尝试。还有一个问题是我能够动态设置div的高度。请检查更新的plunker：您能更具体地说明现在的问题是什么吗？我想为
chatContent
动态添加/删除类。toggle（）是jQuery。
#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;
}