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

最新推荐文章于 2024-07-23 21:45:47 发布

徐同保

最新推荐文章于 2024-07-23 21:45:47 发布

阅读量2.7k

点赞数 1

分类专栏： web前端前端技术分享文章标签： css 布局顶部固定

本文链接：https://blog.csdn.net/xutongbao/article/details/78923525

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!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>