<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ display:flex; flex-direction:column; height:100%; } .header,.footer{ height:80px; width:100%; background:#ccc; } .main{ flex:1; background:#f60; overflow-y:auto;}
.main p{ line-height:10; } </style> </head> <body> <div class="wrap"> <div class="header"> header </div> <div class="main"> main <p>1</p> <p>1</p><p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p><p>1</p>
<p>1</p> <p>4</p> <p>4</p> </div> <div class="footer"> footer </div> </div></body>
</html>