easyui panel自适应浏览器宽度

一、目标效果：

当浏览器窗口大小改变时。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

 <div class="wrapper">

 　　<div class="easyui-panel my-panel" title="标题" data-options="fit:true">

 　　　　<p>panel 内容111111111111111</p>

 　　　　<p>panel 内容2222222222222222222</p>

5　　 　　<p>333333333333333333333333333333333333333</p>

6　　 </div>

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