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

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

我想有一个聊天框，其中将有一个用户列表框的高度等于浏览器的高度或适合浏览器的高度

用户列表将位于左侧，并且可以滚动。消息将被放置在这个区块的右边，就像我们在Facebook上看到的一样

卷轴在固定高度下运行良好。但是，当我将该高度更改为100%时，它只显示所有块，如果窗口太小，则在浏览器中添加一个滚动条

这就是我所拥有的：

HTML:

简而言之，我想要一个Facebook风格的聊天室。请帮我找到一个好的解决办法

提前感谢您。

解决方案：

JSfiddle：

我找不到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>

让我知道它是否适合你

---

jquery将高度固定在底部，但为页脚留有空间，页脚粘在布局的底部。

我在写这篇文章时错过了引语对不起。然而，在我的html代码中，引用是存在的，我也有同样的问题。我还修改了页脚谢谢你的提示；）现在我修改了页脚，当我为对话添加100%的高度时，它们都会显示出来，不再有滚动。我现在来看看页脚。试着把JS代码放进去，暂时删除页脚，看看它是如何工作的好吧，这个页脚不适合这个页面。我编辑了我的初始答案，看看JSFIDLE。我想这是你想要的方式！我认为这是可能的调整它只与css，但你的解决方案是工作的weel，我只需要找到一个解决方案的页脚现在。谢谢你。

.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 */
}

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

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