zoukankan      html  css  js  c++  java
  • 页面布局(1)——全屏布局

    全屏布局-flex

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>全屏布局</title>
      <style>
        html,
        body,
        .parent {
          margin: 0;
          height: 100 %;
          overflow: hidden;
        }
    
        body {
          color: white;
        }
    
        .parent {
          display: flex;
          flex-direction: column;
        }
    
        .top {
          height: 100px;
          background: blue;
        }
    
        .bottom {
          height: 50px;
          background: black;
        }
    
        .middle {
          flex: 1;
          display: flex;
        }
    
        .left {
           200px;
          background: red;
        }
    
        .right {
          flex: 1;
          overflow: auto;
          background: pink;
        }
    
        .right .inner {
          min-height: 1000px;
        }
      </style>
    </head>
    
    <body>
      <div class="parent">
    
        <div class="top">
          top
        </div>
    
        <div class="middle">
    
          <div class="left">
            left
          </div>
    
          <div class="right">
    
            <div class="inner">
              right
            </div>
    
          </div>
    
        </div>
    
        <div class="bottom">
          bottom
        </div>
      </div>
    </body>
    
    </html>
    

    全屏布局-position

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>全屏布局</title>
      <style>
        html,
        body,
        .parent {
          margin: 0;
          height: 100%;
          overflow: hidden;
        }
    
        body {
          color: white;
        }
    
        .top {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 100px;
          background: blue;
        }
    
        .left {
          position: absolute;
          left: 0;
          top: 100px;
          bottom: 50px;
           200px;
          background: red;
        }
    
        .right {
          position: absolute;
          left: 200px;
          top: 100px;
          bottom: 50px;
          right: 0;
          background: pink;
          overflow: auto;
        }
    
        .right .inner {
          min-height: 1000px;
          min- 1500px;
        }
    
        .bottom {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 50px;
          background: black;
        }
      </style>
    </head>
    
    <body>
      <div class="parent">
    
        <div class="top">
          top
        </div>
    
        <div class="left">
          left
        </div>
    
        <div class="right">
    
          <div class="inner">
            right
          </div>
    
        </div>
    
        <div class="bottom">
          bottom
        </div>
      </div>
    </body>
    
    </html>
    
  • 相关阅读:
    【Exgcd】斩杀线计算大师
    【DP】操作集锦
    【DP】被3整除的子序列
    【DFS序】【CF-1328E】Tree Queries
    【规律】【CF1327-D】Carousel
    Luogu P4774 屠龙勇士
    LOJ 10149 凸多边形的划分
    Luogu P4036 火星人
    Luogu P3193 GT考试
    CF 986C AND Graph
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605190.html
Copyright © 2011-2022 走看看