首页 > 代码库 > 网页上中下三分布局,上下固定,中间自适应
网页上中下三分布局,上下固定,中间自适应
<!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>
网页上中下三分布局,上下固定,中间自适应
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。