div下的可滾動div

夥計們，我有以下HTML。 #underdiv是否可以在#topdiv下滾動？我想達到具有項目列表的效果，並且能夠在保持#topdiv始終可見的情況下上下滾動。它可以只用CSS來完成，還是我必須添加一些Javascript魔術？我還有包含在文件中的JQuery和JQueryMobile（因爲這是爲iOS設備設計的），但我不讓它們看起來更簡單。div下的可滾動div

在此先感謝您的幫助！

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <style> 
     #underdiv { 
      background-color: red; 
      position: relative; 
      top: -40px; 
      width: 80%; 
      margin: 0 auto; 
     } 
     #topdiv { 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
    <div id="topdiv"> 
     <h1>Random title</h1> 
     <p>This is a random paragraph bla bla bla bla yada yada yada</p> 
    </div> 
    <div id="underdiv"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
      <li>Item 6</li> 
      <li>Item 7</li> 
      <li>Item 8</li> 
      <li>Item 9</li> 
      <li>Item 10</li> 
      <li>Item 11</li> 
      <li>Item 12</li> 
      <li>Item 13</li> 
      <li>Item 14</li> 
      <li>Item 15</li> 
      <li>Item 16</li> 
      <li>Item 17</li> 
      <li>Item 18</li> 
      <li>Item 19</li> 
      <li>Item 20</li>    
     </ul> 
    </div> 
</body> 
</html>

來源

2011-04-27 lamelas

儘管滾動條也消失，

ul { 
    margin: 0; 
    padding: 40px 0 0 30px; 
} 

#underdiv { 
    background-color: red; 
    width: 80%; 
    margin: 0 auto; 
    height: 200px; 
    overflow: auto; 
    margin-top: -40px; 
} 


#topdiv { 
    background-color: yellow; 
    padding: 1px; /* to stop margins collapsing */ 
    position: relative; 
}

來源

2011-04-27 10:26:38 clairesuzy

This Works！謝謝！ :) – lamelas 2011-04-27 13:56:09

從underiv刪除position:relative，並添加position:fixed到topdiv。看看resut here

來源

2011-04-27 10:28:46 anu

div下的可滾動div

回答

相關問題