绝对定位的div,页面的其余部分可滚动

Bar*_*tts 0 html javascript css

我希望页面顶部的div不会移动,但我希望下面的页面的其余部分可以滚动.滚动条只能从div下方开始.

这可能不使用框架

提前致谢

ANo*_*nge 5

HTML

<div id="main">
<div id="header"> Header Content</div>    
<div id="content">
    <ul><li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>           
        </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

      body { margin: 0;}
#main{
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y:scroll;               
}


li{
    text-decoration: none;
    display: block;
    height: 20px;
   padding: 20px; 

}
Run Code Online (Sandbox Code Playgroud)

演示更新