满屏品字布局怎么设计

    body{  
          height: 1200px;  
      }  
      .main {  
          position: fixed;  
          left: 0;  
          top: 0;  
          height: 100%;  
          width: 100%;  
      }  
      .wrapper-up {  
          height: 50%;  
      }  
  
      .wrapper-down {  
          height: 50%;  
          position: relative;  
      }  
      .div-square-up {  
          width: 50%;  
          margin: 0 auto;  
          border: 2px solid red;  
          height: 96%;  
          box-sizing: border-box;  
      }  
  
      .div-square-left {  
          position: absolute;  
          left: 0;  
          width: 48%;  
          height: 100%;  
          box-sizing: border-box;  
          border: 2px solid red;  
      }  
  
      .div-square-right {  
          position: absolute;  
          right: 0;  
          width: 48%;  
          height: 100%;  
          border: 2px solid red;  
          box-sizing: border-box;  
      }