今天小编跟大家讲解下有关网页上中下三分布局即上下固定中间自适应 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关网页上中下三分布局即上下固定中间自适应 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 禁止浏览器从本地缓存中调阅页面。--> <meta http-equiv="pragram"content="no-cache"> <!--网页不保存在缓存中 每次访问都刷新页面。--> <meta http-equiv="cache-control"content="no-cache, must-revalidate"> <!--同上面意思差不多 必须重新加载页面--> <!--网页在缓存中的过期时间为0 一旦网页过期 必须从服务器上重新订阅--> <meta http-equiv="expires"content="0"> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> * { margin:0; padding:0; } html, body, #box { height:100%; font:small/1.5"宋体", serif; } body { text-align:center; } #box { text-align:left; background:#666; display:table; width:80%; margin:0 auto; position:relative; } #box > div { display:table-row; } #header, #footer { background:#fcc; height:50px; vertical-align:bottom; } #main { background:#ccf; } #main #wrap { display:table-cell; background:#ffc; vertical-align:middle; } #text { text-align:center; } </style> <!--[if IE]> <style type="text/css"> #header, #footer { width:100%; z-index:3; position:absolute; } #footer { bottom:0; } #main { height:100%; z-index:1; position:relative; } #main #wrap { position:absolute; top:50%; width:100%; text-align:left; } #main #text { position:relative; width:100%; top:-50%; background:#ccc; } </style> <![endif]--> </head> <body> <div id="box"> <div id="header">header</div> <div id="main"> <div id="wrap"> <div id="text"> <p>测试文本</p> </div> </div> </div> <div id="footer">footer</div> </div> </body> </html>来源：爱蒂网
