不同分辨率调整div高度

不同分辨率调整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并不是分辨率,只是在现有的分辨率你的页面最大可用屏幕宽度