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自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
随机推荐
- HDU 3849 By Recognizing These Guys, We Find Social Networks Useful(双连通)
HDU 3849 By Recognizing These Guys, We Find Social Networks Useful pid=3849" target="_blan ...
- Tree通用的系列方法列表-treepanel
在项目中经常会用到Tree来显示数据进行操作.今天整理出来一系列操作Tree的方法.可供项目中方便调用.不用重复写代码,快速应用,通用性很强. Tree系列方法列表如下:主要针对的是ext.net中的 ...
- MySQL查看SQL语句执行效率(转)
Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看 SQL 语句的执行效 果,可以帮助选择更好的索引和优化查询语句,写出更好 ...
- es6编写generator报错
首先babel基础包(不安装额外东西)并不是支持完整的es6语言 自己写的如下代码 let generator = function* () { ; ,,]; ; }; var gen = gener ...
- 多主机共享ssh Public/Private Key
前期服务器比较少,所有代码都放在github的私库中,在自己的github 设置中设置SSH keys就可以拉下相应的库中的代码到本地与服务器了,但是最近服务器多家了几台,每台都生成key加到gith ...
- ps可选颜色
RGB模式和CMYK模式 青色加红色是黑色->颜料,而蓝色绿色(它们合起来是青色)加红色却是白色->加光 可调整的原色(主色)可调整的主色分为三组RGB三原色:红色.绿色.蓝色CMY三原色 ...
- 什么是GC Roots
GC Root 2012年11月28日 ⁄ 综合 ⁄ 共 625字 ⁄ 字号 小 中 大 ⁄ 评论关闭 常说的GC(Garbage Collector) roots,特指的是垃圾收集器(Ga ...
- nyoj311 完全背包 经典背包问题
完全背包 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 直接说题意,完全背包定义有N种物品和一个容量为V的背包,每种物品都有无限件可用.第i种物品的体积是c,价值是w. ...
- 【Java】代理模式,静态代理和动态代理(基于JDK或CGLib)
当我们需要在一个方法之前或之后添加一段逻辑时,自然会想到使用代理类.代理类帮我们代理了实际类的调用,然后可以在实际调用之前和之后添加一些逻辑,从而不浸入实际类. 拓展:由于代理类能在实际类调用之前和之 ...
- 常用的兼容IE和火狐FF等浏览器的js方法(js中ie和火狐的一些差别)
介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了.为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefo ...