.main{ width: 500px; margin: auto; margin-top:15%; border:1px solid #ccc; } .main form{ margin: 45px 20px; } .top{ height: 10%; background: #ccc; } .bottom{ position:absolute; height: 5%; background: #ccc; bottom: 0px; } .layui-fluid{ padding:0px; } .container{ width: 100%; height: 100vh; } .content{ height: 80%; padding: 30px; } .item{ height: 30%; /* border:1px solid red; */ } .item .task{ border:1px solid #23e; border-radius: 5px; height: 100%; background: #ddd; } .item .task .name,.school,.grade,.subject{ padding:10px; } .item .task .grade span{ display: inline-block; width: 32%; } /* scan */ .scan_content{ height: 84%; padding: 10px; } .left{ height: 100%; background: #ccc; } .middle{ height: 100%; background: #eee; padding-left:10px; } .right{ height: 100%; background: #ccc; padding-left: 10px; }