如圖所示，紅色部分div上下滾動正常，藍色部分無法滾動。
都使用了內(nèi)容div的寬度大于父div寬度的方法，兩者嵌套，隱藏滾動條。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html,body{
font:14px 'Nova',sans-serif;
height:100%;
}
ul li{
list-style:none;
}
u{
text-decoration:none;
}
*{
margin:0px;
padding:0px;
}
.left{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100px;
overflow:hidden;
}
.left-main{
height:100%;
width:119px;
background-color:#1d2530;
overflow-y:scroll;
overflow-x:hidden;
}
.left-top{
position:fixed;
top:0px;
left:0px;
}
.left-top li{
width:60px;
height:60px;
margin:20px;
}
.left-bottom{
position:absolute;
bottom:0px;
left:14px;
}
.left-bottom li{
width:16px;
height:16px;
margin:10px;
}
.left-bottom li:first-of-type{
float:left;
}
.left-bottom li:last-of-type{
float:right;
}
.menu{
position:absolute;
width:250px;
top:0px;
left:100px;
height:100%;
overflow:hidden;
}
.menu-main{
height:100%;
width:268px;
overflow-y:scroll;
overflow-x:hidden;
background-color:#212c3b;
}
.MENU{
margin-top:30px;
padding-right:30px;
}
.MENU li{
height:24px;
margin-bottom:12px;
line-height:24px;
}
.MENU li span:first-of-type{
float:left;
margin-left:30px;
}
.MENU li:last-of-type{
margin-bottom:24px;
}
.menuicon1{
float:right;
}
.radius{
float:right;
height:24px;
width:30px;
text-align:center;
color:white;
border-radius:8px 8px;
background-color:#3399ff;
}
.PRODUCTS{
margin-top:24px;
padding-right:30px;
}
.PRODUCTS li{
height:24px;
margin-bottom:12px;
line-height:24px;
}
.PRODUCTS li u{
width:24px;
height:24px;
margin-left:30px;
}
.PRODUCTS li span{
margin-left:2px;
}
.PRODUCTS .YOUR-PRODUCTS{
margin-left:30px;
}
.menuicon2{
float:right;
}
.PRODUCTS li:last-of-type{
margin-bottom:24px;
}
.line1{
width:200px;
height:1px;
margin:0 auto;
background-color:#2A3546;
}
.line2{
width:200px;
height:1px;
margin:0 auto;
background-color:#2A3546;
}
.DASHBOARD {
margin-top:30px;
padding-right:30px;
}
.DASHBOARD li{
height:24px;
margin-bottom:12px;
line-height:24px;
}
.DASHBOARD li span:first-of-type{
float:left;
margin-left:30px;
}
.DASHBOARD li:last-of-type{
margin-bottom:24px;
}
.menuicon3{
float:right;
}
.menubottom{
margin-top:20px;
padding-right:30px;
}
.menubottom li{
height:24px;
line-height:24px;
}
.menubottom .Money{
float:right;
}
.menubottom .Monthly{
margin-left:30px;
float:left;
}
.leftmessage{
width:400px;
height:100%;
left:350px;
top:0px;
position:absolute;
}
.leftmessage-top{
height:80px;
line-height:80px;
width:100%;
position:absolute;
top:0px;
font-size:24px;
z-index:100;
background-color:white;
}
.leftmessage-top span{
margin-left:20px;
}
.leftmessage-search{
position:absolute;
top:80px;
left:0px;
height:79px;
width:100%;
border-top:1px solid gray;
border-right:1px solid gray;
z-index:100;
background-color:white;
}
.leftmessage-search input{
width:350px;
height:30px;
margin-top:20px;
border-radius:5px 5px 5px 5px;
background-image:url(./images/search.png);
background-repeat:no-repeat;
background-position:330px 7.5px;
margin-left:20px;
}
.leftmessage-bottom-main{
width:400px;
height:100%;
position:absolute;
top:0px;
overflow:hidden;
border-left:0px;
z-index:10;
}
.leftmessage-bottom{
overflow-y:scroll;
overflow-x:hidden;
width:420px;
height:100%;
}
.leftmessage-bottom1{
width:350px;
height:130px;
margin-top:160px;
padding-left:25px;
padding-right:25px;
border:1px solid gray;
border-left:2px solid #3399ff;
}
.leftmessage-bottom2{
width:350px;
height:130px;
margin-top:0px;
padding-left:25px;
padding-right:25px;
border-bottom:1px solid gray;
}
.leftmessage-bottom1-top{
height:46px;
line-height:46px;
margin-top:10px;
margin-bottom:10px;
}
.leftmessage-bottom1-top img{
width:46px;
height:46px;
}
.leftmessage-bottom1-top ul{
float:right;
display:inline-block;
width:250px;
margin-right:25px;
line-height:20px;
}
.leftmessage-bottom1-top ul span{
margin-top:-30px;
float:right;
}
.leftmessage-bottom1-bottom p{
width:270px;
height:60px;
}
.leftmessage-bottom1-bottom{
width:350px;
}
.leftmessage-bottom1-bottom .noread{
float:right;
width:20px;
height:20px;
color:white;
background-color:#3399ff;
margin-top:-40px;
margin-right:20px;
text-align:center;
border-radius:90px 90px 90px 90px;
}
.rightmessage{
height:100%;
width:100%;
position:absolute;
z-index:-5;
}
.rightmessage-top-txt{
margin-top:20px;
height:40px;
float:right;
padding-left:20px;
padding-right:60px;
}
.rightmessage-top-image{
margin-top:20px;
float:right;
}
.rightmessage-top{
border:1px solid white;
border-bottom:1px solid gray;
height:79px;
position:absolute;
top:0px;
right:0px;
width:100%;
z-index:-5;
background-color:white;
}
.rightmessage-bottom-history{
width:100%;
height:100%;
}
.rightmessage-bottom-history-bar{
height:80px;
padding-left:750px;
margin-top:80px;
padding-right:0px;
border-bottom:2px solid gray;
z-index:-5;
}
.right-user{
width:300px;
float:left;
}
.rightmessage-bottom-history-bar span{
line-height:80px;
margin-left:30px;
}
.right-user-icon1{
width:120px;
position:absolute;
top:100px;
right:200px;
border-right:1px solid gray
}
.right-user-icon1 img{
width:25px;
height:25px;
border-radius:8px 8px 8px 8px;
}
.right-user-icon2{
position:absolute;
top:100px;
right:20px;
}
.right-user-icon2 img{
width:25px;
height:25px;
border-radius:8px 8px 8px 8px;
}
.right-user-onetwoeight span{
display:inline-block;
position:absolute;
right:120px;
top:80px;
}
.rightmessage-bottom-history{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.rightmessage-bottom-history-txt{
padding-left:750px;
height:100%;
width:115%;
overflow-x:hidden;
overflow-y:scroll;
}
.rightmessage-bottom-history-txt1{
margin-top:159px;
padding-left:20px;
padding-top:20px;
border-left:1px solid gray;
border-bottom:1px solid gray;
}
.rightmessage-bottom-history-txt1 ul{
width:600px;
margin-left:60px;
margin-top:-50px;
line-height:30px;
margin-bottom:20px;
}
.rightmessage-bottom-history-txt2{
padding-left:20px;
padding-top:20px;
border-left:1px solid gray;
border-bottom:1px solid gray;
}
.rightmessage-bottom-history-txt2 ul{
width:600px;
margin-left:60px;
margin-top:-50px;
line-height:30px;
margin-bottom:20px;
}
.twoimages{
margin-left:50px;
margin-bottom:10px;
}
.lasttext{
position:fixed;
margin-bottom:20px;
bottom:20px;
left:770px;
}
.plus{
width: 55px;
height: 56px;
border-right: solid 1px #dfe3e9;
background-color:white;
}
.plustext{
margin-left:-4px;
border: solid 1px #dfe3e9;
height:55px;
width:600px;
}
.leftname1{
color:#3399ff;
}
.leftday{
color:gray;
}
.rightmessage-bottom-history-maintxt{
width:100%;
height:100%;
position:absolute;
top:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="left">
<div class="left-main">
<div class="left-top">
<ul>
<li><img src="C:\Users\Black\Desktop\day12\images\icon1.png"></li>
<li><img src="C:\Users\Black\Desktop\day12\images\icon2.png"></li>
<li><img src="C:\Users\Black\Desktop\day12\images\icon3.png"></li>
<li><img src="C:\Users\Black\Desktop\day12\images\icon4.png"></li>
</ul>
</div>
<div class="left-bottom">
<ul>
<li><img src="C:\Users\Black\Desktop\day12\images\sicon3.png"></li>
<li><img src="C:\Users\Black\Desktop\day12\images\sicon4.png"></li>
<ul>
</div>
</div>
</div>
<div class="menu">
<div class="menu-main">
<ul class="MENU">
<li>
<span>MENU</span>
<img class="menuicon1" src="C:\Users\Black\Desktop\day12\images\sicon3.png"></li>
</li>
<li>
<span>Overview</span>
</li>
<li>
<span>Sales</span>
<a class="radius">54</a>
</li>
<li>
<span>Your Staff</span>
</li>
<li>
<span>Analytics & Targeting</span>
</li>
<li>
<span>What’s New </span>
</li>
</ul>
<p class="line1"></p>
<ul class="PRODUCTS">
<li>
<span class="YOUR-PRODUCTS">YOUR PRODUCTS</span>
<img class="menuicon2" src="C:\Users\Black\Desktop\day12\images\sicon3.png"></li>
</li>
<li>
<u><img src="C:\Users\Black\Desktop\day12\images\video.png"></u>
<span>Books</span>
</li>
<li>
<u><img src="C:\Users\Black\Desktop\day12\images\video.png"></u>
<span>Tutorials</span>
</li>
<li>
<u><img src="C:\Users\Black\Desktop\day12\images\video.png"></u>
<span>Stocks</span>
</li>
<li>
<u><img src="C:\Users\Black\Desktop\day12\images\video.png"></u>
<span>Infographics</span>
</li>
</ul>
<p class="line2"></p>
<ul class="DASHBOARD">
<li>
<span>DASHBOARD</span>
<img class="menuicon3" src="C:\Users\Black\Desktop\day12\images\sicon3.png"></li>
</li>
<li>
<span>Messages</span>
</li>
<li>
<span>Connections</span>
<a class="radius">54</a>
</li>
<li>
<span>Integrations</span>
</li>
<li>
<span>Account Settings</span>
</li>
</ul>
<ul class="menubottom">
<li>
<span class="Monthly">Monthly Goals</span>
<span class="Money">$580/$3200</span>
</li>
</ul>
</div>
</div>
<div class="leftmessage">
<div class="leftmessage-top">
<span>Messages</span>
</div>
<div class="leftmessage-search">
<input type="text" value="search">
</div>
<div class="leftmessage-bottom-main">
<div class="leftmessage-bottom">
<div class="leftmessage-bottom1">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname1">Bessie Berry</u>
</li>
<li>
<u class="leftday">Twitter</u>
</li>
<span>3M<span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>I pay for the 4Mb/sec down, 512 Kb/sec up service from O2. In fact, it's relatively quick, and stable... </p>
<u class="noread">4</u>
</div>
</div>
<div class="leftmessage-bottom2">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person7.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname">Victor Weber </u>
</li>
<li>
<u class="leftday">Adobe</u>
</li>
<span>8M<span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>I shared this on my fb wall a few months back, and I thought I'd share it here again because it's such a great... </p>
<u class="nnoread"></u>
</div>
</div>
<div class="leftmessage-bottom2">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person2.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname">Dustin Benson</u>
</li>
<li>
<u class="leftday">Facebook</u>
</li>
<span>Yesterday<span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>If there is anyone who needs an invitation please add yourself in the comments of this post! </p>
<u class="nnoread"></u>
</div>
</div>
<div class="leftmessage-bottom2">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person3.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname">Jack Mason</u>
</li>
<li>
<u class="leftday">Yahoo</u>
</li>
<span>Yesterday<span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>BruteDC is a peer-to-peer movie+tv series sharing and downloading platform which works on intranet inside... </p>
<u class="nnoread"></u>
</div>
</div>
<div class="leftmessage-bottom2">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person4.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname">Stephen Shelton </u>
</li>
<li>
<u class="leftday">Snapchat</u>
</li>
<span>Stephen Shelton <span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>Yes, p2p traffic is often filtered (QoSed). Although i do use BT on O2 wires, and in good days dl speed... </p>
<u class="nnoread"></u>
</div>
</div>
<div class="leftmessage-bottom2">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person5.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname">Sally Willis </u>
</li>
<li>
<u class="leftday">Twitter</u>
</li>
<span>12 Jun<span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>Yes, it's O2: 'internet extreme', which is no longer offered. </p>
<u class="nnoread"></u>
</div>
</div>
<div class="leftmessage-bottom2">
<div class="leftmessage-bottom1-top">
<img src="C:\Users\Black\Desktop\day12\images\person6.png">
<ul>
<li>
<a class="circle"></a>
<u class="leftname">Robert Patton </u>
</li>
<li>
<u class="leftday">A Team</u>
</li>
<span>9 Jun<span>
</ul>
</div>
<div class="leftmessage-bottom1-bottom">
<p>I change my service from this 4Mb plan to their much </p>
<u class="n noread"></u>
</div>
</div>
</div>
</div>
</div>
<div class="rightmessage">
<div class="rightmessage-top">
<div class="rightmessage-top-txt">
<ul>
<li>
Jordan J.
</li>
<li>
Administrator
</li>
</ul>
</div>
<div class="rightmessage-top-image">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
</div>
</div>
<div class="rightmessage-bottom-history">
<div class="rightmessage-bottom-history-bar">
<div class="right-user">
<span>Bessie Berry</span>
<u class="circlegreen"></u>
</div>
<div class="right-user-right">
<div class="right-user-icon1">
<img src="C:\Users\Black\Desktop\day12\images\1.png">
<img src="C:\Users\Black\Desktop\day12\images\2.png">
<img src="C:\Users\Black\Desktop\day12\images\3.png">
</div>
<div class="right-user-onetwoeight">
<span>1 of 28</span>
</div>
<div class="right-user-icon2">
<img src="C:\Users\Black\Desktop\day12\images\2.png">
<img src="C:\Users\Black\Desktop\day12\images\3.png">
</div>
</div>
</div>
</div>
<div class="rightmessage-bottom-history-maintxt">
<div class="rightmessage-bottom-history-txt">
<div class="rightmessage-bottom-history-txt1">
<div class="rightmessage-bottom-history1-user">
<div class="rightmessage-bottom-history1-user-img">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
</div>
<ul>
<li>Bessie Berry 8:31 AM </li>
<li>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but
it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</li>
</ul>
</div>
</div>
<div class="rightmessage-bottom-history-txt2">
<div class="rightmessage-bottom-history1-user">
<div class="rightmessage-bottom-history1-user-img">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
</div>
<ul>
<li>Bessie Berry 8:31 AM </li>
<li>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but
it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</li>
</ul>
</div>
</div>
<div class="rightmessage-bottom-history-txt2">
<div class="rightmessage-bottom-history1-user">
<div class="rightmessage-bottom-history1-user-img">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
</div>
<ul>
<li>Bessie Berry 8:31 AM </li>
<li>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but
it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</li>
</ul>
</div>
<div class="twoimages">
<img src="C:\Users\Black\Desktop\day12\images\photo1.png">
<img src="C:\Users\Black\Desktop\day12\images\photo2.png">
</div>
</div>
<div class="rightmessage-bottom-history-txt2">
<div class="rightmessage-bottom-history1-user">
<div class="rightmessage-bottom-history1-user-img">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
</div>
<ul>
<li>Bessie Berry 8:31 AM </li>
<li>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but
it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</li>
</ul>
</div>
</div>
<div class="rightmessage-bottom-history-txt2">
<div class="rightmessage-bottom-history1-user">
<div class="rightmessage-bottom-history1-user-img">
<img src="C:\Users\Black\Desktop\day12\images\person1.png">
</div>
<ul>
<li>Bessie Berry 8:31 AM </li>
<li>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but
it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</li>
</ul>
<div class="lasttext">
<button class="plus" value="+"><i>+</i></button>
<input type="text" class="plustext" value="Well, kinda both :) but more of that second option, i`ve seen many systems infected and crawling with">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
右邊是不是加了overflow:hidden
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學院和江蘇省首批服務外包人才培訓基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構(gòu)，發(fā)展為教育服務業(yè)的綜合性企業(yè)集團，成為集合面授教學培訓、網(wǎng)
達內(nèi)教育集團成立于2002年，是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
浪潮集團項目經(jīng)理。精通Java與.NET 技術， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責任公司從事總經(jīng)理職務負責iOS教學及管理工作。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關注鍍金池微信號
手機訂課，優(yōu)惠多多