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

为什么会那样？这是吸虫：

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

更新

未设置chatBox的高度解决了问题。但其他问题是我无法动态设置div的高度。请检查这个plunker：https://plnkr.co/edit/v0X8lSL84oNd5KNZT0TV?p=preview

Answer 1

不要设置#chatBox的高度（您当前会溢出它），但是如果您需要将其设置为300px，请使用#chatContent并使其灵活高度，例如。

Answer 2

其中一个主要原因是您的标头设置了padding。填充物正在推动下面的一切。我想最好的选择是将bottom设置为25px。就我所见，这不会造成任何损害。

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

2 个答案: