easyui layout 高度怎么自适应?

0 0

easyui layout 高度怎么自适应?10

现在项目里准备用easyui 的layout来布局, 但是遇到高度不能自适应, 会出现2个滚动条很烦

...

<div id="main" class="easyui-layout" style="width: 1348px; height: 1000px;overflow:visible">  
    <div region="west" split="true" title="West" style="width:230px;background:#eee;" id="west">
    ...
    </div>

    <div id="center" region="center"  border="false">
         <div id="contentCenter" class="easyui-layout" fit="true" >
              <div id="contentSearchBar" region="north" split="true" title="West"style = "height:300px;padding:5px;">
                 ...
              </div>
              <div id="content" region="center" border="false">
                ...
              </div>
         </div>
    </div>
</div>

...

这是我使用layout的地方,main的大小必须指定,否则不会显示,但是当content里面的数据超过main的高度和宽度的时候就会出现滚动条, 加上浏览器的就有2个滚动条, 很难看.
本人本来不是做前端的, js水平有限, 问问各路大神有没好的解决办法?

2013年7月02日 12:56

西门小贤
5
0 0 2

4个答案按时间排序按投票排序

0 0

采纳的答案

我解决了，不过后来我不采用easyui了，太卡。它的功能的确很赞。我都做到快结束了。换成ligerui了，这个功能少，也有很多bug，不过执行快很多，进行少量修改基本上满足需求啦。从服务器请求数据到grid控件，easyui很慢，好像还要准备一段时间似的，然后才慢慢显示出来。

		var width = $(window).width()-80;
		var height = $(window).height()-120;
		stView_layout = $('#stView_layout').layout({
		width: width,
		height: height
		});
		station_view = $('#stationView').window({
				title: '测站导航',
				left:50,
				top:80,
				width: width,
				modal: false,
				shadow: false,
				closed: true,
				height: height,
				onResize:function(w,h){
					if(stView_treegrid){
						stView_treegrid.treegrid({
						width:w-20,
						height:h-260
						});
					}
				}
		});

类似这样，有个 onsize方法，可以在页面载入和改变浏览器大小时让你重新定制窗口内组件大小。这个是主页面。然后这个页面的主区域会载入各个 tab页对吧，这个页也是指定到某个 action 或 springmvc的后台页面转发器。
这个页面也需要组件随着窗口调整

		$(window).resize(function(){
			var width = $(window).width()-20;
			var height = $(window).height()-30;
			grid.datagrid('resize',{
				width:width,
				height:height
			});
		});

用上面的方法调整子页面（Tab载入的）内的各个 grid 等等的大小。

2013年7月03日 09:02

wsc830719
40
0 0 3

1条评论

0 0

就是 fit="true"

2015年4月14日 11:24

唐敬原
30
0 0 0

添加评论

0 0

感觉你本身的需求就有问题吧：既要限制高度，又不能出现滚动条，那就只好content的数据多是用verflow:hidden不显示了。
或者我没理解你的需求。

2013年7月02日 16:40

dubadiyu
30
0 0 0

1条评论

0 0

给<body>加入class="easyui-layout"，以及添加属性fit="true"。

<body class="easyui-layout" fit="true">
  <div region="west" fit="true">

  </div>
  <div region="center" fit="true">

  </div>
</body>

2013年7月02日 13:31

hellostory
32
1 1 8

3条评论

已解决问题

未解决问题

排行榜

查看全部排名>>