如何用css重現這個？

使用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是2，imchatlist爲1和IM textarea的是3但是，是的這是行不通的，有人可以幫我嗎？

來源

2013-05-29 Michael Nana

我們需要看到你的HTML以及。 – Dai

解決方法是將左右兩邊都放在浮動的各個包裝中。左邊的應該設置爲overflow-y: auto;。然後，在左側放置另一個設置爲height: auto的div。

這裏有一個小提琴：http://jsfiddle.net/jakelauer/5TtBX/1/

來源

2013-05-29 02:34:58 Jake

+1 111111111111 – argentum47

非常感謝傑克！你給我的東西讓我着迷。即使我知道理論上的浮動是什麼，我也不會用css來說話，但我不會使用它。無論如何謝謝你的擡頭。 –

-1

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

來源

2013-05-29 02:54:39

如何用css重現這個？

回答

相關問題