我如何用css重现这个？

Question

我正在尝试构建此图片

使用css。

项目2是大内容区域，项目1和项目3放在2中。项目I将显示朋友列表并且可滚动而项目3应该被修复，因此用户不应向下滚动以找到它，因为这将是他们输入文字的地方。此外，整个区域应覆盖从顶部到底部的拉伸，但宽度为900px（第2项）

我一直试图在过去的几个小时内完成这项工作，但我不能只在区域1滚动而不影响区域2和3加上我不能让区域3留在原地。

这就是我试过的

.imchatbox {
position:fixed;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
width:900px;
height:100%;
left:15%;
right:50%;
overflow:scroll
background-color: #FFFFFF;
top:0px; 
padding:20px;
padding-top:50px;
bottom: 0px;



}

.imchatlist{
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
width:300px;
top:0px;
height:100%
background-color: #cccccc;

overflow-x:hidden;
overflow-y:auto;

}

.imtextarea{

border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
width:600px;
height:20%;
left:301px;
}

imchatbox为2，imchatlist为1，im textarea为3.但是，它不起作用，有人可以帮助我吗？

Answer 1

解决方法是将左侧和右侧包裹在两个浮动的包装中。左边的一个应设置为overflow-y: auto;。然后，在左侧，放置另一个设置为height: auto的div。

这是一个小提琴：http://jsfiddle.net/jakelauer/5TtBX/1/

Answer 2

.imchatbox {
position:absolute;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
width:85%;;
top:0px;
height:80%;
left:15%;
right:85%;
overflow:scroll;
background-color: #FFFFFF;
padding:20px;
padding-top:50px;
}

.imchatlist{
position:absolute;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
left=0px;
top:0px;
width:15%;
height:100%;
background-color: #cccccc;
overflow-x:hidden;
overflow-y:auto;
}

.imtextarea{
position:absolute;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
width:85%;
height:20%;
left:15%;
bottom:0px;
}