不同分辨率调整div高度

来源:互联网 发布:java log日志级别 编辑:程序博客网 时间:2024/06/01 08:41

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

原创粉丝点击