常见三栏布局*{ margin: 0;padding: 0; } html,body{ width: 100%;heig

Document

Header

Aside1

content

Aside2

    </main>
    <footer>
      Footer
    </footer>
</div>

*{ margin: 0;padding: 0; } html,body{ width: 100%;height: 100%; } .box{ width: 100%;height: 100%; display: flex; flex-direction: column; background-color: darkcyan; box-sizing: border-box;

} header{ width: 100%; height: 30px; background-color: #FF4400; line-height: 30px; text-align: center; box-sizing: border-box; } main{ width: 100%; height:calc(100% - 30px - 30px); display: flex; flex-direction: row; box-sizing: border-box; } .aside1{ width: 20%; height:100%; background-color: #FED700; text-align: center; padding-top: 10px; } .content{ width:60%; height: 100%; background-color: #FFA500; text-align: center; padding-top: 10px; } .aside2{ width: 20%; height: 100%; background-color: #87CEEA; text-align: center; padding-top: 10px; }

footer{ background-color: #90EE90; height: 30px;width: 100%; line-height: 30px; text-align: center; box-sizing: border-box; }