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

回答

相关问题