• 网页上中下三分布局,上下固定,中间自适应


    <!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> 
    

  • 相关阅读:
    echart自定义浮窗 增加点击事件
    原生js学习 选择dom
    GOjs版本2.0去除水印
    js 作用域
    javaScript的原型模式
    JavaScript的基本包装类型说明
    原生js 函数 callee属性
    Vue学习-基本指令
    js函数
    Kubernetes(一):云计算发展历程
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/7092643.html
Copyright © 2020-2023  润新知