CSS divides a page evenly into four parts (div)

When you meet the requirements in your project, the data monitoring page needs to display 4 pieces of content simultaneously, such as:

How does CSS divide a page evenly into four parts (div)?

<! DOCTYPE html>{margin:0; padding:0; }. main{Width:100%; Height:100%;        Position:absolute; }. Quarter-div{Width:50%; Height:50%; float: Left; }. blue{Background-color: #5BC0DE; }. green{Background-color: #5CB85C; }. orange{Background-color: #F0AD4E; }. yellow{Background-color: #FFC706; }    </style>
As follows:
Due to the floating problem of the chart generated by the inner frame of the plate, there are problems with the above method, the improved method is as follows
CSS styles are as follows:
/* divide a page into 4 parts */ . clearfix:before,.clearfix:after{    display:table;    Content:"";}. clearfix:after{    Clear:both;}. clearfix{    *zoom:1;}. thewrap{    margin-top:16px;    Padding-left:20px;    Padding-right:20px;     100%;    Box-sizing:border-box;    Overflow:auto;}. Quarter-div{    50%;    Box-sizing:border-box;     float : Left;    Overflow:auto;}
JS Code:
<script>    $ (function() {        var bodyh = $ (window). Height ();        Console.log (BODYH);         var h = bodyh/2-70;        $ (". Quarter-div. Panel-body"). Height (h);    }); </script>
CSS divides a page evenly into four parts (div)