上下固定宽度100px；中间部分自适应
方案一：绝对定位方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } html,body{ height:100%; overflow: hidden; } .wrap{ position: relative; height: 100%; width: 100%; } .wrap div{ position: absolute; width: 100%; left: 0; } .head{ top: 0; height: 100px; background: #666; } .foot{ bottom: 0; height: 100px; background: #666; } .center{ top: 100px; bottom: 100px; background: #EEE; } </style> </head> <body> <div class="wrap"> <div class="head"></div> <div class="center"> </div> <div class="foot"></div> </div> </body> </html>
注意html和body需要设置height：100% ，自适应部分需要进行上下同时定位
方案二：flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } html,body{ height:100%; overflow: hidden; } .wrap{ display: flex; flex-direction: column; height: 100%; width: 100%; } .head{ height: 100px; background: #666; } .foot{ height: 100px; background: #666; } .center{ flex: 1; background: #EEE; } </style> </head> <body> <div class="wrap"> <div class="head"></div> <div class="center"> </div> <div class="foot"></div> </div> </body> </html>
注意html和body需要设置height：100% ，父元素设置display:flex 及规定排列方向 flex-direction:column，定高部分设置高度，不定高部分设置flex：1