zoukankan      html  css  js  c++  java
  • easy ui layout 高度 宽度自适应浏览器

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
    2.     pageEncoding="UTF-8"%>  
    3. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
    4. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    6. <html>  
    7. <head>  
    8. <%  
    9.     String path = request.getContextPath();  
    10.     request.setAttribute("path", path);  
    11. %>  
    12. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    13. <title>TTest</title>  
    14. <link rel="stylesheet" type="text/css" href="<%=path%>/themes/default/easyui.css">    
    15. <link rel="stylesheet" type="text/css" href="<%=path%>/themes/icon.css">    
    16. <script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.min.js"></script>    
    17. <script type="text/javascript" src="<%=path%>/js/jquery.easyui.min.js"></script>   
    18.   
    19. <script type="text/javascript">  
    20.     $(document).ready(function(){  
    21.         var height1 = $(window).height()-20;  
    22.         $("#main_layout").attr("style","100%;height:"+height1+"px");  
    23.         $("#main_layout").layout("resize",{  
    24.             "100%",  
    25.             height:height1+"px"  
    26.         });  
    27.     });  
    28.       
    29.       
    30.     $(window).resize(function(){  
    31.         var height1 = $(window).height()-30;  
    32.         $("#main_layout").attr("style","100%;height:"+height1+"px");  
    33.         $("#main_layout").layout("resize",{  
    34.             "100%",  
    35.             height:height1+"px"  
    36.         });  
    37.     });   
    38. </script>  
    39. </head>  
    40. <body>  
    41. <div style="margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:5px;">  
    42.     <div id="main_layout" class="easyui-layout"  style="100%; height:680px;">  
    43.         <!-- 北方 -->  
    44.         <div data-options="region:'north'" style="height: 40px;background-color:#95B8E7;">  
    45.             <span style="margin-left:0.5%;">  
    46.                 <font size="3" style="line-height: 2.0em;" color="white" >  
    47.                     <b>AAAAAAAAAAAAAAAAAAAAAAA </b>  
    48.                 </font>  
    49.             </span>  
    50.               
    51.             <span style="float:right;margin-top:10px;margin-right:20px;">  
    52.                 <font size="3" color="white">欢迎 :Admin</font>      
    53.                 <a href="<%=path %>/loginOut.do" > <font size="3" color="red">退出</font> </a>  
    54.             </span>  
    55.         </div>  
    56.           
    57.         <!-- 西方 -->  
    58.         <div data-options="region:'west',split:true" title="BBBBBB" style=" 200px;">  
    59.             <div class="easyui-accordion"  data-options="fit:true,border:false">  
    60.                   
    61.             </div>  
    62.         </div>  
    63.         <!-- 中间 -->  
    64.         <div data-options="region:'center',title:'CCCCCCC',iconCls:'icon-ok'">  
    65.             <div id="tTabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">  
    66.                 <div title="DDDDD"  
    67.                     data-options="closable:true,href:'<%=path%>/view/gmtool/welcome.jsp'"  
    68.                     style="overflow: auto; padding: 20px;">  
    69.                 </div>  
    70.             </div>  
    71.         </div>  
    72.         <!-- 南方 -->  
    73.         <div data-options="region:'south',split:true" style="height:30%;background-color:#95B8E7;">  
    74.             <div style="" align="center">  
    75.                 <font size="" color="white">Copyright &copy; 2014 Beijing  Co., Ltd. All Rights Reserved 版权所有 </font>  
    76.             </div>  
    77.         </div>  
    78.     </div>  
    79. </div>  
    80. </body>  
    81. </html>  
  • 相关阅读:
    MySQL 数据库改名的简单方法
    Apache启用Gzip压缩
    安全的Web主机iptables防火墙脚本
    iptables
    Linux服务器维护统计连接数查看外部IP
    面试相关(新)
    hdu 4946 Area of Mushroom (凸包,去重点,水平排序,留共线点)
    凸包全解
    eclipse (android环境搭建)
    wins 软件安装
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317576.html
Copyright © 2011-2022 走看看