CSS实现最大正方形

第一种

 .section {
        width: 100%;
        padding-bottom: 100%;
        background: #333;
  }
  
  <div class="section"></div>
  
  

第二种

    body{
        margin: 0;
        padding: 0;
    }

    .container{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .container .box{
        position: absolute;
        width: 100vmax;
        height: 100vmax;
        background-color: #cccc;
    }
    
    
    <div class="container">
        <div class="box"></div>
    </div>