当前位置: 首页 > 工具软件 > JSP Layout > 使用案例 >

easy ui layout 高度 宽度自适应浏览器

汪晟睿
2023-12-01
  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","width:100%;height:"+height1+"px");  
  23.         $("#main_layout").layout("resize",{  
  24.             width:"100%",  
  25.             height:height1+"px"  
  26.         });  
  27.     });  
  28.       
  29.       
  30.     $(window).resize(function(){  
  31.         var height1 = $(window).height()-30;  
  32.         $("#main_layout").attr("style","width:100%;height:"+height1+"px");  
  33.         $("#main_layout").layout("resize",{  
  34.             width:"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="width: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="width: 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>  
 类似资料: