头尾固定-中间部分可滚动-布局

最新推荐文章于 2023-05-15 17:55:20 发布

amazing-yuan

最新推荐文章于 2023-05-15 17:55:20 发布

阅读量679

点赞数

分类专栏：技术文章布局

本文链接：https://blog.youkuaiyun.com/qq_31699161/article/details/99847792

版权

技术文章同时被 2 个专栏收录

23 篇文章

订阅专栏

布局

1 篇文章

订阅专栏

头尾固定-中间部分可滚动-布局：

<!DOCTYPE html>
 <style>
   *{
       margin: 0;
       padding: 0;
   }
   body{
       display: flex;
       flex-direction: column;
       height: 100vh;
   }
   #top{
       height: 50px;
       background: red;
   }
   #center{
       flex: 1;
       height: 100%;
       overflow-y:auto;
   }
   .center{
       height: 200vh;
       background: pink;
   }
   #bottom{
       height: 50px;
       background: green;
   }
 </style>
<body>
	<div id="top">头部</div>
	<div id="center">
    	<div class="center">中间</div>
	</div>
	<div id="bottom">底部</div>
</body>