<div class='wrap'> <div class='header'></div> <div class='main'></div> <div class='footer></div> </div>
/*设置html和body的高度为显示屏的高度*/ /*如果当前滚动页面最大父级是html, body,一定要加上height: 100%,否则,flex固定是失效*/ /*如果是在弹窗里面固定底部布局,则父级弹窗一定要加上height:xx%; 光是min-height和max-height是不可以的,否则也会失效*/ html, body { height: 100%; margin: 0; } .wrap{ display: flex; flex-direction: column; height: 100%; } .main{ overflow-y:auto; flex: 1; } .header,.footer{ height: 50px; }