Question

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

那么，什么是使消息不在输入后面的最佳方法，并且只在输入之上总是针对不同的屏幕高度？

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

Answer 2

你可以用纯CSS来实现这个目标：

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

将它放在聊天窗口的div容器上。不使用固定位置。

Answer 3

您可以在邮件列表中添加一个底部边缘，如下所示：

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

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

在屏幕底部放置一个div但不允许在它后面的内容

3 个答案: