flex 布局实现固定头部和底部，中间滚动布局

最新推荐文章于 2022-04-26 17:06:40 发布

weixin_30332705

最新推荐文章于 2022-04-26 17:06:40 发布

阅读量579

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yadiblogs/p/10726652.html

版权

关键词：display: flex，flex: 1, overflow-y: scroll;

实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........

小二，上代码！

来喽~~

// html布局
<html>
<body>
<div class="container">
    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage</div>
    <div class="body">
      <div>orry, but the page you were trying to view does not exist.</div>
       <div>shhhhsss</div>
      <div>shhhhsss</div>
      <div>shhhhsss</div>
      <div>shhhhsss</div>
      <div>shhhhsss</div>
    </div>
 <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div>
</div>
</body>
</html>

关键的css来啦！

 2 * {
 3             line-height: 1.2;
 4             margin: 0;
 5 }
 6  html, body {
 7             font-family: sans-serif;
 8             height: 100%;
 9             width: 100%;
10 }
11 .container{
12      display: flex; // 关键， flex布局
13      flex-direction: column; // 关键，三块主题column摆放。
14      height: 100vh; // 关键，设置高度为可见高度的100%；        
15 }
16 .head{ 
17     width: 100%;
18     background: springgreen;
19 }
20 .body{
21      flex: 1; // 关键， 填充剩余空间
22      width: 100%;
23      background: lightyellow;
24      overflow-y: scroll;   // 关键， 超出部分滚动
25 }
26 .footer{
27     width: 100%;
28     background: goldenrod;
29 }

附上全部代码，可以自己复制到浏览器中打开，看效果~

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page Not Found</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        * {
            line-height: 1.2;
            margin: 0;
        }

        html, body {
            color: #888;
            font-family: sans-serif;
            height: 100%;
            width: 100%;
        }
        .container{
          display: flex;
          height: 100vh;
          flex-direction: column;
        }
        .head{
          width: 100%;
          background: springgreen;
        }
        .body {
          background: lightyellow;
          width: 100%;
          flex:1;
          color: black;
          overflow-y: scroll;
        }
        .footer {
          background: goldenrod;
          width: 100%;
        }
        .body div {
          height: 200px;
          width: 300px;
          background: greenyellow;
          margin: 20px;
        }
    </style>
</head>
<body>
<div class="container">

    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div>
    <div class="body">
      <div>orry, but the page you were trying to view does not exist.</div>
       <div>shhhhsss</div>
      <div>shhhhsss</div>
      <div>shhhhsss</div>
      <div>shhhhsss</div>
      <div>shhhhsss</div>
    </div>
 <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yadiblogs/p/10726652.html

weixin_30332705

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex 布局实现固定头部和底部，中间滚动布局

关键词：display: flex，flex: 1, overflow-y: scroll;实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........小二，上代码！来喽~~// html布局<html><body><div class="conta...
复制链接

扫一扫