将 div 放置在屏幕底部，但不允许其后面的内容答案

【问题标题】：position a div at bottom of screen but dont allow content behind it将 div 放置在屏幕底部，但不允许其后面的内容
【发布时间】：2014-09-12 12:01:42
【问题描述】：

我正在尝试使用 CSS 制作类似布局的聊天应用程序。所以为此我需要在屏幕底部输入文本。我把它和position:fixed; bottom: 0; 放在一起，它固定在底部，所以它很好，但问题是当它上面的消息增加时，它们会在输入 div 后面并隐藏在那里，最后一条消息在滚动时甚至不显示。

代码是：

<div id='chat_window'>
    <ul id="messages" style="list-style-type: none; margin: 0; padding: 0;"></ul>
    <div class="panel-footer" style="position: fixed; bottom: 0;">
        <div class="input-group">
            <input id="my_msg" type="text" class="form-control input-sm" placeholder="Type your message...">
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="my_msg_submit">Send</button>
            </span>
        </div>
    </div>
</div>

那么，对于不同的屏幕高度，让消息不落后于输入而只位于输入之上的最佳方法是什么？

【问题讨论】：

标签： css twitter-bootstrap layout

【解决方案1】：

当您使用 position:fixed 时，该元素会从文档流中取出并相对于浏览器窗口定位。这意味着您的其他 div 不知道屏幕底部的固定元素，因此您必须通过调整内容 div 的高度以减去页脚的高度来补偿页脚的高度。

在较新的浏览器中执行此操作的一种方法是使用 CSS calc() 表达式。请参阅this 示例代码。

<!DOCTYPE html>
<html>
    <style>
        html, body { 
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: auto;
        }

        #main {
            overflow: auto;
            height: calc(100% - 30px);
        } 

        #footer {
            margin-left: 5px;
            position: fixed;
            bottom: 0;
            right: 0px;
            left: 0px;
            height: 30px;
        } 
    </style>

    <body>
        <div id='main'>
            <ul id="messages" style="list-style-type: none; margin: 0px; padding: 0;">
                <li>message 1</li>
                <li>message 2</li>
                <li>message 3</li>
                <li>message 4</li>
                <li>message 5</li>
                <li>message 6</li>
                <li>message 7</li>
                <li>message 8</li>
                <li>message 9</li>
                <li>message 10</li>
                <li>message 11</li>
                <li>message 12</li>
                <li>message 13</li>
                <li>message 14</li>
                <li>message 15</li>
                <li>message 16</li>
                <li>message 17</li>
                <li>message 18</li>
                <li>message 19</li>
                <li>message 20</li>
                <li>message 21</li>
                <li>message 22</li>
                <li>message 23</li>
                <li>message 24</li>
                <li>message 25</li>
                <li>message 26</li>
                <li>message 27</li>
                <li>message 28</li>
                <li>message 29</li>
                <li>message 30</li>
                <li>message 31</li>
                <li>message 32</li>
                <li>message 33</li>
                <li>message 34</li>
                <li>message 35</li>
                <li>message 36</li>
                <li>message 37</li>
                <li>message 38</li>
                <li>message 39</li>
                <li>message 40</li>
                <li>message 41</li>
                <li>message 42</li>
                <li>message 43</li>
                <li>message 44</li>
                <li>message 45</li>
                <li>message 46</li>                
            </ul>
        </div>
        <div id="footer" class="panel-footer" >
            <div class="input-group">
                <input id="my_msg" type="text" class="form-control input-sm" placeholder="Type your message...">
                <span class="input-group-btn">
                    <button class="btn btn-warning btn-sm" id="my_msg_submit">Send</button>
                </span>
            </div>
        </div>
    </body>
<html>

【讨论】：

工作得很好，就像希望的那样（在 FF 和 Chrome 上测试）。
@user2104070 很高兴它对你有用。我更新了示例以删除不必要的#container div。

【解决方案2】：

您可以在消息列表的底部添加一个边距，如下所示：

<ul id="messages" style="list-style-type: none; margin: 0 0 30px 0; padding: 0;"></ul>

请看这里：http://jsfiddle.net/3nETE/1/

【讨论】：

但是我认为当输入的div超过30px（或50px）时这将不起作用？
您可以为 .panel-footer 类指定一个固定的高度，但无论如何输入都不应该改变它的高度。如果它是一个文本区域，那将是一个不同的故事，但即便如此，您也可以在 div 上设置最大高度并确保边距始终大于最大高度。
但是如果在像移动设备这样的小屏幕尺寸上，.panel-footer 的高度将与桌面不同，所以我认为我们不能制作固定高度？
当您为 div 指定高度时，无论内容或屏幕大小如何，它都会是该高度。内容可能会被截断（或溢出，这是溢出：规则发挥作用的地方），但高度不会改变。如果唯一的内容是输入和按钮，那么（大多数）移动设备会很好地显示它。它必须是一个非常非常窄的屏幕才能被截断。
好的。使用 jsfiddle 向上滚动时，某些内容仍位于输入 .panel-footer 的后面。向上或向下滚动时有什么办法不落后于.panel-footer？

【解决方案3】：

您可以使用纯 CSS 实现这一点：

#chat_window {
  position: absolute;
  bottom: 0;
}

只需将其放在聊天窗口的 div 容器中即可。不使用固定位置。

【讨论】：

用你的 html 和 css 发布一个 jsfiddle