zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    如果你想开发一个应用(1-17)
    如果你想开发一个应用(1-16)
    如果你想开发一个应用(1-15)
    0079 Ehcache 3.x应用入门及通过JCache与Spring整合
    0078 Java与MySQL时间戳传递/存储/协调问题--userLegacyDatetimeCode--userTimezone--serverTimezone
    0077 web.xml中配置Spring MVC时,Servlet-name上报Servlet should have a mapping的错误
    0076 判断回文串
    0075 字符串的反转
    0074 几道面试题
    0073 javacTask: 源发行版 1.8 需要目标发行版 1.8
  • 原文地址:https://www.cnblogs.com/yadiblogs/p/10726652.html
Copyright © 2011-2022 走看看