如何使滾動欄外部div的滾動DIV像Facebook上一樣？

<html> 
<head> 
<title>Example</title> 
<style> 
#head{ 
position:fixed; /* this will make the div stay in the same place */ 
width:100%; /* this will size the dive to the width of the window */ 
height: 42px; /* this will make the height of the div 42px */ 
top:0px; /* make sure the div is at the very top */ 
left:0px; /* make sure the div is as far left as possible */ 
background: #009933; /* this will make the background of the div into a green color */ 
}#head_slack{ /* we make this one the same size so no text is ever covered */ 
width:100%; /* make sure the width of the slack is 100% */ 
height: 42px; /* make sure the hight of the slack is the same as the head fixed */ 
}body{ 
margin: 0px; /* takes out the default white border around the page */ 
}#leftFixed{ 
width 150px; /* set the width the same as the with of the table data cell containing the div */ 
position: fixed; /* make sure it stays in place */ 
left: 0px; /* make sure the div is at the left */ 
top: 45px; /* make sure the div is below the head div */ 
}#rightFixed{ 
width 200px; /* set the width the same as the with of the table data cell containing the div */ 
position: fixed; /* make sure it stays in place */ 
right: 0px; /* make sure the div is at the right */ 
top: 45px; /* make sure the div is below the head div */ 
} 
</style> 
</head> 
<body> 
<div id="head">This is the fixed header</div> 
<div id="head_slack">this is the header that takes the slack</div> 
<table width="100%"> 
<tr> 
<td width="150px" valign="top"> 
<div id="leftFixed">This is fixed content on the left</div> 
</td> 
<td> 
This is the scrollable content 
</td> 
<td width="200px" valign="top"> 
<div id="rightFixed">this is fixed content on the right</div> 
</td> 
</tr> 
</table> 
</body> 
</html>

來源

2011-12-01 01:14:34

一個簡單的方法，我發現是：

#divID{ 
overflow: hidden; 
width: calc(1024px + 0); 
} 

#divID:hover{ 
overflow-y:scoll; 
}

出於某種原因，這顯示在div

來源

2015-04-12 00:12:25

如何使滾動欄外部div的滾動DIV像Facebook上一樣？

回答

相關問題