网页上中下三分布局，上下固定，中间自适应
Posted liguangsunls
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页上中下三分布局，上下固定，中间自适应相关的知识，希望对你有一定的参考价值。
<!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。一旦网页过期，必须从server上又一次订阅--> <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>
以上是关于网页上中下三分布局，上下固定，中间自适应的主要内容，如果未能解决你的问题，请参考以下文章