jQuery实现布局高宽自适应

在页面布局（layout）时经常是上左右的框架布局并且需要宽、高度的自适应，静态的div+css是无法实现，但是利用jQuery比较容易实现浏览器的兼容性，所以需要js来辅助。

主要通过 jQuery.resize() 这个方法，也就是当窗口大小改变时重新计算布局的高宽。

Html代码

Js代码

$(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() - 30;
    $('#left').height(h);
    $('#right').height(h-20);
}

转载于:https://www.cnblogs.com/greatandforever/archive/2010/09/29/1838512.html

jQuery实现布局高宽自适应相关推荐

两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...
iOS开发 UILabel实现自适应高宽
UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
bootstraptable列宽自适应内容_多列列表框行高和列宽的自适应调整
LabVIEW:2015 在使用多列列表框(Multicolumn Listbox)时,有时不同列显示的内容长度不一致,为了显示更加美观,并节省界面显示空间,需要实现多列列表框的行高和列宽的自适应调整 ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
动态设置view或布局的宽高
代码中动态设置view或布局的宽高标签: 图片/ 动态改变/ 宽高有时我们需要在应用中动态改变图片或某一块布局的大小.这就不能用XML文件写成固定值,而需要在java代码中动态设置.效果如下: ...
java代码设置布局的宽和高
RelativeLayout.LayoutParams lp=new RelativeLayout.LayoutParams(dip2px(this,480),dip2px(this,300)) mP ...
Grid布局实现网页自适应
前言网页自适应布局常见的方法有三种. 1.原生:使用@media媒体查询,rem相对单位. 通过对不同的屏幕宽度进行CSS的调整来实现,不同设备下的网页自适应显示效果. 适合对不同设备显示都需要进行 ...
android中自适应布局教程,Android自适应布局设计技巧
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的自适应布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些 ...
Android布局之屏幕自适应
Android布局之屏幕自适应在做应用时发现程序没有屏幕自适应功能,变换手机使用之后,界面就很混乱了,字体也很奇怪.经过百度的帮助,找到自适应方法. 1字体的自适应这里又有关于Android下表示 ...

jQuery实现布局高宽自适应

jQuery实现布局高宽自适应相关推荐

最新文章

热门文章