不同分辨率调整div高度
问题
在做easyui 表格页面时,一般是页面上半部分为搜索框部分,有时候由于搜索条件很多,在分辨率下正常的显示成一排,但在低分辨率下,搜索框区域会出现滚动条,而且你设置了不出现滚动条时,则有一部分搜索条件会被隐藏(-.-|最大可能是搜索和重置按钮被隐藏).
ps:这里我没使用table布局,因为table定的太死了,遇到一些极端的问题,变形太严重而且还不好解决,所以我的搜索区域布局为:inlinke-block布局
<div data-options="region:'north'" id="searchPanel"
>
<form id="searchForm" method="post">
<div style="padding-left: 4px; padding-top:5px;display: inline-block;">
<label>机构名称:</label>
<input style="width: 96px;" class="easyui-textbox" name="orgName"></input>
</div>
<div style="padding-left: 4px; padding-top:5px;display: inline-block;">
<label>机构等级:</label>
<select id="search_hospitalLevel" name="hospitalLevel"></select>
</div>
<div style="padding-left: 4px; padding-top:5px;display: inline-block;">
<label>机构等次:</label>
<select id="search_hospitalOrder" name="hospitalOrder"></select>
</div>
<div style="padding-left: 4px;padding-top:5px;display: inline-block;">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="btnSearch">查询</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-redo'" id="btnResetSearch">重置</a>
</div>
</form>
</div>
解决
加个样式:
@media screen and (max-width: 1920px){
#searchPanel{height:40px!important}
}
@media screen and (max-width: 1440x) {
#searchPanel{height: 80px!important}
}
注意:
max-width并不是分辨率,只是在现有的分辨率你的页面最大可用屏幕宽度