JQuery EasyUI Layout 在from佈局自適應視窗大小
阿新 • • 發佈：2019-01-03
在JQuery EasyUI中，如果直接在form上佈局時當視窗大小調整佈局不會改變，將佈局應用於body時中間隔著一個form，橫豎不好弄。
網上有多個解決方案，一般都是寫程式碼，在視窗大小改變時設定佈局。
經實驗，新版本的JQuery EasyUI中佈局可以採用以下方式來達到自動適應大小：
首先設定樣式，使html和body高度為100%（因form和div高度設定為100%需要繼承上級）：
<style type="text/css"> html,body { height:100%; margin:0 auto; } </style>
然後頁面程式碼如下：
<body class="easyui-layout"> <form id="form1" runat="server" style="height:100%; border:green 0px solid;" region="center"> <div style="padding-left:30px; height:40px;" region="north">北</div> <div region="center">中間</div> <div region="west" style="width:30px;">West</div> <div region="east" style="width:40px;">East</div> </form> </body>
效果1，小視窗：
效果2，調整大小後：
可以看到佈局會自動適應大小了
備註：測試JQuery EasyUI版本從1.3.1可以，1.2.6不可以，中間的沒有試過