flex 布局實現固定頭部和底部，中間滾動布局

本文轉載自查看原文 2019-04-17 22:18 2772 flex/ 布局

關鍵詞：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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uniapp實現頭部、底部固定，中間滾動的布局 flex上下固定中間滾動布局布局：flex彈性布局_固定底部、居中 CSS 實現頭部、頁腳滾動和固定 uni-app 布局固定頭部，內容滾動 flex實現兩側固定中間自適應上下固定中間自適應布局 Css 設置固定表格頭部，內容可滾動通過flex布局時footer始終在頁面底部 ionic3 實現列表頭部滾動到頂部的時候在頂部固定