어떻게 이것을 CSS로 재현합니까?

Question

이 이미지를 작성하려고합니다.

css.

항목 2는 큰 콘텐츠 영역이고 항목 1과 3은 2에 배치됩니다. 항목 친구 목록을 표시하고 항목 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이 imchatlist가 1이고 메신저 텍스트 영역은 3입니다하지만 그래 누군가가 나를 도울 수, 작동하지 않습니다, 2

시도 무엇인가?

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