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

Question

我正在使用 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>

风格:

#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; 才能使其正确显示)

为什么会这样？这是 plunker:

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

更新:

不设置 chatBox 的高度解决了这个问题。但另一个问题是我无法动态设置 div 的高度。请检查这个插件:https://plnkr.co/edit/v0X8lSL84oNd5KNZT0TV?p=preview

Answer 1

不要设置 #chatBox 的高度(你现在溢出了它)，但是如果你需要它正好是你设置的 300px，使用 #chatContent 并使其高度灵活。