flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定，中间自适应的布局的实际需求也很常见。实现起来也很简单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex</title> <style type="text/css"> body{ padding: 0; margin: 0; } .container{ height: calc(100vh - 50px); background-color: black; display: flex; flex-direction: column; } .header{ width: 100%; height: 100px; background-color: #e77c8e; } .main{ width: 100%; flex: 1; background-color: #2bae85; } .footer{ width: 100%; height: 100px; background-color: #7a7374; } </style> </head> <body> <div class="container"> <div class="header">header</div> <div class="main">main</div> <div class="footer">footer</div> </div> </body> </html>注意点：
1、container父容器的高度必须是一个可以计算出来的固定高度。
2、实际开发中因为中间部分内容层级太多，甚至嵌套表格等，使得自适应无法生效。这时候要看一下中间自适应部分的高度是否从父容器继承过来，可以试给table高度不对的那一层设置 height:100%; 或者 height:inherit; 试一下能否生效。