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自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
随机推荐
- HTML中button和input button的区别
button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...
- 转multicast vs broadcast
转自:http://blog.csdn.net/bloghome/article/details/4682984 一.multicast概述: 多媒体应用集成了声音.图形.动画.文本以及视频,这种 ...
- 什么是FSK制式?什么是DTMF制式?
目前国内来电显示制式有FSK.DTMF(双音频)两种,普通推广的是FSK."来电显示"又称"主叫号码显示"(Calling Identity Delivery) ...
- OGG_Oracle GoldenGate简介(概念)
2014-03-01 Created By BaoXinjian
- 使用Xfire发布WebService接口遇到的问题:
问题一: log4j:WARN No appenders could be found for logger (org.codehaus.xfire.transport.DefaultTranspor ...
- 2-String to Integer (atoi)
实现atoi这个函数, public int atoi(String str),传入字符串str可以返回整数,请仔细考虑一下字符串的各种情况! String to Integer: Case分析 正常 ...
- 17monipdb根据IP获得区域
https://www.ipip.net/download.html https://github.com/17mon/csharp IpAndPositionHelper public class ...
- MATLAB(1)——基本调试方法(Debug)
作者:桂. 时间:2017-02-28 07:06:30 链接:http://www.cnblogs.com/xingshansi/articles/6477185.html 声明:转载请注明出处, ...
- js 控制图片大小核心讲解
控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...
- haproxy 配置mysql的代理
应用场境,是如果mysql服务器没有外网的,需要一个有外网的代理服务器做代理,这时就可以用haproxy做个四层的代理: listen mysql bind mode tcp balance roun ...