html - 我如何用css重现这个？

Question

我正在尝试构建此图像

使用 CSS。

第 2 项是大内容区域，第 1 项和第 3 项位于 2 中。第 1 项将显示朋友列表并且是可滚动的，而第 3 项应该是固定的，因此用户不应该向下滚动以找到它，因为那将是他们将在其中输入文本。此外，整个区域应覆盖从顶部到底部的拉伸，但宽度为 900 像素（第 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.

这是一个小提琴：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;
}