jQuery实现布局高宽自适应
在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。
主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。
HTML-code
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
JS-code
$(document).ready(function() {
initLayout();
$(window).resize(function(){
initLayout();
});
});
function initLayout() {
$('#right').width(document.documentElement.clientWidth - $("#left").width()-2);
var h = document.documentElement.clientHeight - $("#header").height()-5;
$('#left').height(h);
$('#right').height(h);
}
jQuery实现布局高宽自适应的更多相关文章
- 关于Google圆角高光高宽自适应按钮及其拓展
关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...
- LayIM聊天框全屏根据浏览器高宽自适应
个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...
- 关于Google 圆角 高光 高宽 自适应 按钮
最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...
- 纯CSS写九宫格样式,高宽自适应正方形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- jquery 获取各种高宽
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $ ...
- JQuery 实现两列等高并自适应高度
想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...
- UILabel实现自适应高宽
UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
- Android如何在初始化的时候获取加载的布局的宽高
在自定义ListView中,需要将下拉刷新的View在初始化的时候设置padding隐藏起来,这时就要在初始化的时候获得要加载的布局View的高度. private View headView; he ...
- iOS开发 UILabel实现自适应高宽
UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
随机推荐
- iOS - TouchLock 手势锁
1.绘制手势锁 具体实现代码见 GitHub 源码 QExtension QTouchLockView.h @interface QTouchLockView : UIView /// 提示信息框 @ ...
- Error_GL_KeyflexfieldDefinitionFactory.getStructureNumber无法找到应用产品
2014-07-12 BaoXinjian
- java怎样获得JVM可能的总内存,最大内存,以及空暇内存?
public class Demo2 { public static void main(String[] args) { DecimalFormat df = new DecimalFormat(& ...
- failed to load selinux policy freezing
一.原因: 在修改selinux配置文件时输入并保存了一个错误的配置参数. 二.挽救: 1. 重启系统. 2. 在启动选项上按 e. 3. 进入grub编辑页面. 4. 向下移动光标至fi下一行. 5 ...
- background-image:url(data:image/gif;base64,XXXX) base64方式将本地图片添加到文档中
background-image:url(data:image/gif;base64,R0lGODlhCwAMAMZjAElxvlNvtVRxtkp1v0p9wVh7vkqBwl58vml6vml7v ...
- struts2.xml中所有constant详解--大全
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...
- spring cloud中通过配置文件自定义Ribbon负载均衡策略
一.Ribbon中的负载均衡策略 1.Ribbon中支持的负载均衡策略 AvailabilityFilteringRule:过滤掉那些因为一直连接失败的被标记为circuit tripped的后端se ...
- Excel中不常用的一些公式用法
INDIRECT函数 http://baike.baidu.com/view/3222185.htm 用于使用单元格内容拼凑公式的情况. 1.采用 [工作表名]!单元格名 的形式读取内容: 2.所 ...
- 翻翻git之---效果鲜明的类ViewPager库 ConvenientBanner(对图片载入部分进行改动)
转载请注明出处:王亟亟的大牛之路 昨天写了篇基础的View绘制的内容貌似观众老爷们不怎么喜欢.那再这里再安利下自己定义View时.用到Paint Canvas的一些温故.讲讲用路径绘画实现动画效果(基 ...
- C# winform 多线程异步操作线程启动暂停与恢复
/// <summary> /// 线程控制模块 /// </summary> private ManualResetEvent manualResetEvent = new ...