满屏的品字实现```js--------------------------------------------```

 <style>
     *{
         margin: 0;
         padding: 0;
     }

     html,body {
         height: 100%;
         width: 100%;
     }

     .layout {
        height: 100%;
        width: 100%;
     }

    .layout .top{
      width: 50%;
      height: 50%;
      background: burlywood;
      margin: 0 auto;
    }

    .layout .bottom{
      width: 100%;
      height: 100%;
    }

    .layout .bottom .left{ 
      float: left;
      width: 50%;
      height: 50%;
      background: red;
    }
    .layout .bottom .right{ 
      float: right;
      width: 50%;
      height: 50%;
      background: cadetblue;
    }

 </style>

 
</head>
<body>

    <div class="layout">
        <div class="top"></div>
        <div class="bottom">
            <div class="left"></div>
            <div class="right"></div>
        </div>   
    </div>
</body>