Question

我正在开发一个具有聊天功能的html页面。

我希望有一个聊天框，其中有一个用户列表框，其高度等于浏览器的高度或符合浏览器的高度。

用户列表将位于左侧，并且可以滚动。消息将位于此块的右侧，就像我们在Facebook上看到的那样。

滚动效果很好，固定高度。但是，当我将该高度更改为100％时，它只显示所有块，如果窗口太小，则向浏览器添加滚动。

这实际上就是我所拥有的：

HTML：

<html>
<head> ... </head>
<body>
    <div id="global">
        <header> ... </header>
        <nav> ... </nav>
        <div id="contenu">
            <div id="conversationsList">
                <ul id="ulConversations">
                    <li> User 1 </li>
                    <li> User 2 </li>
                    <li> User 3 </li>
                    <li> User 4 </li>
                    <li> User 5 </li>
                    <li> User 6 </li>
                    <li> User 7 </li>
                </ul>
            </div>

            <div id="conversation">
                <ul id="messagesList">
                    <li> Message 1 </li>
                    <li> Message 2 </li>
                    <li> Message 3 </li>
                    <li> Message 4 </li>
                    <li> Message 5 </li>
                    <li> Message 6 </li>
                </ul>
            </div>
        </div>

        <p class="clearBoth"></p>
        <footer> ... </footer>
    </div>
</body>
</html>

CSS：

.clearBoth{
    clear: both;
}

html {
   height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#global{
    width: 968px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
}

header{
    padding: 20px 34px 0;
    height: 110px;
}

nav{
    clear: both;
    width: 968px;
    height: 45px;
}

#contenu{
    width: 920px;
    padding: 20px 20px 60px 20px; /* padding bottom 60px for the footer */
}

#conversationsList{
    width: 215px;
    height: 100%;
    float:left;
    padding-bottom: 60px;
}

#conversationsList #ulConversations{
    height: 400px;
    overflow: auto;
    list-style-type: none;
    padding: 0;
}

#conversationsList #ulConversations li{
    clear: both;
    cursor: pointer;
    height: 60px;
}

#conversation{
    width: 700px;
    float: left;
}

#conversation #messagesList{
    height: 340px;
    overflow: auto;
    list-style-type: none;
    padding: 0;
    width: 700px;
    border: solid 1px #eaa9c7;
}

footer{

    width: 968px;    
    position:absolute;
    bottom:0;
    height:60px;   /* Height of the footer */
}

简而言之，我想要一个Facebook风格的聊天框。请帮助我找到一个好的解决方案。

提前谢谢。

Answer 1

解决方案：

的jsfiddle： http://jsfiddle.net/2cQm7/1/

我无法找到CSS解决方案，但这是一个JQuery解决方法：

<script>
    var height;
    $(document).ready( function () {
    var initialh  = $( window ).height() - 30;
      $("#conversation").css("height" , initialh + 'px');

     $( window ).resize(function() {
        height = $( window ).height() - 30;
      $("#conversation").css("height" , height + 'px');
     });
    });
</script>

这里是页脚的CSS和其他调整：

  position:relative;
    background-color: red;
    width: 100%;
    height: 30px;
    clear:both;

让我知道它是否适合你。

jquery保持高度固定在底部，但为页脚留出空间，页脚粘贴在布局的底部。

聊天页面的CSS：用户列表1列，聊天1列

1 个答案: