zoukankan      html  css  js  c++  java
  • 网页上中下三分布局,上下固定,中间自适应

    <!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; 
    	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 { 
    100%; 
    z-index:3; 
    position:absolute; 
    } 
    #footer { 
    bottom:0; 
    } 
    #main { 
    height:100%; 
    z-index:1; 
    position:relative; 
    } 
    #main #wrap { 
    position:absolute; 
    top:50%; 
    100%; 
    text-align:left; 
    } 
    #main #text { 
    position:relative; 
    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> 
    

  • 相关阅读:
    Java知识汇总第二天
    jvm学习笔记
    java知识汇总的第一天
    全链路压测流量模型
    FunTester测试框架Redis性能测试实践
    FunTester抄代码之路
    Jira API的踩坑记
    把工作讲给家人听
    颇具年代感的《JMeter中文操作手册》
    FunTester框架Redis压测预备
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/7092643.html
Copyright © 2011-2022 走看看