一、目標效果：
當瀏覽器窗口大小改變時。panel寬度始終為瀏覽器寬度的50%，panel高度則根據其中內容的多少而變化，橫向豎向滾動條皆不出現。且不需要重新刷新瀏覽器或者其他js代碼
兼容：chrom .ie7~11
二、代碼：
關鍵API:fit屬性設置為true.默認是false
API地址：http://www.jeasyui.com/documentation/index.php#
關於這個fit的解釋，官方文檔這么說的：
When true to set the panel size fit it's parent container. The example below shows a panel which can be auto resized to max inner dimensions of its parent container。
意思就是：讓panel尺寸適應它的父元素尺寸。
官方API例子：html
1 <div class="wrapper"> 2 <div class="easyui-panel my-panel" title="標題" data-options="fit:true"> 3 <p>panel 內容111111111111111</p> 4 <p>panel 內容2222222222222222222</p> 5 <p>333333333333333333333333333333333333333</p> 6 </div> 7 </div>
css
.wrapper{
width:50%;/*讓父元素的寬度為50%*/
/*高度不用設置*/
}
復制上述HTML和CSS代碼到編輯器里，然后在瀏覽器中打開。。發現：panel寬度確實始終為瀏覽器的50%,因為父元素的寬度是50%,而panel在fit:true的作用下塞滿了其父元素。
但是panel body中的文本不會自動換行，所以出現了橫向滾動條。
為了解決這個問題,CSS上加入以下代碼：
.wrapper{
width:50%;/*讓父元素的寬度為50%*/
/*高度不用設置*/
word-wrap: break-word; word-break: normal;/*讓文字自動換行*/
}
但是，依舊有個問題：當縮小瀏覽器寬度到一定小時，會出現豎向滾動條。
所以，再加入以下css:
.wraper .panel-body{
height: auto !important;
}
這下子。再怎么縮小瀏覽器，這個panel都是自適應寬度，而且不會出現橫豎向滾動條了。
總結：整合以上所有CSS和Html代碼。完整例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>panel</title> <link rel="stylesheet" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"/> <link rel="stylesheet" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"/> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> <style> .wrapper{ width:50%;/*高度不用設置*/ word-wrap: break-word; word-break: normal; background-color:#444; } .wrapper .panel-body{ height: auto !important; } </style> </head> <body> <div class="wrapper"> <div class="easyui-panel my-panel" title="標題" data-options="fit:true"> <p>panel 內容111111111111111</p> <p>panel 內容2222222222222222222</p> <p>333333333333333333333333333333333333333</p> </div> </div> </body> </html>