html,body { background:#000; padding:0; margin:0; height:100%; } ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; } li { list-style:none; } .aside { width:220px; max-width:220px; position:absolute; top:35px; bottom:0; background:#222d32; z-index:2; padding:10px 0; overflow:auto; } .container li { float:left; } .aside>li,.container>li { height:20px; cursor:pointer; color:#b8c7ce; position:relative; } .container>li { width:40px; margin:0 3px; background:orange; } .pre_2>ul { padding-left:20px; } .pre_3>ul { padding-left:20px; } .pre_2>ul>li { color:#fff; margin:5px 0; /* padding-left:20px; */ } .pre_3>ul>li { color:#fff; margin:5px 0; } .pre_2 .tabView { display:block; } .pre_3 .tabView { /* background:#ffd27f; */ } .aside .pre_2 { display:block; } .aside .pre_3 { display:block; } .aside .pre_2,.aside .pre_3 { height:auto; background:transparent; } .section { position:absolute; left:220px; right:0; top:35px; bottom:0; background:#fff; } .container { min-height:50px; background:#ccc; padding:5px; } .close { position:absolute; right:10px; top:8px; } .close:before,.close:after { content:''; position:absolute; top:50%; width:10px; height:1px; background-color:#888; -webkit-transform:rotate(45deg); transform:rotate(45deg); } .close:after { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } .head { background:#fff; height:35px; } { width:100%; height:100%; } .tabView { }.aside li.red,.container li.red { background:red; }