顶部固定 页面内容部分可以滚动

<!DOCTYPE html>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>顶部固定页 面内容部分可以滚动</title>    
    <style type="text/css">
    body{margin: 0}
    .header{position: absolute;width:100%;height: 100px;background: green;z-index: 999;opacity: 0.5;}
    .empty{height: 100px;}
    .scrollview{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #ddd; overflow-y: scroll;}
    .content{height: 1000px;width: 900px;background: #999;margin: 0 auto;}
    </style>     
</head>      
<body>
<div class="header">顶部</div>
<div class="scrollview">
  <div class="empty"></div>
  <div class="content"></div>
</div>
</body>      
</html> 









posted @ 2017-12-28 16:21  徐同保  阅读(444)  评论(0编辑  收藏  举报