jQuery实现布局高宽自适应

最新推荐文章于 2025-07-24 09:27:17 发布

iteye_21255

最新推荐文章于 2025-07-24 09:27:17 发布

阅读量192

点赞数

分类专栏： jQuery 文章标签： jQuery CSS .net 框架浏览器 ViewUI

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种利用jQuery实现网页自适应布局的方法，适用于上左右框架布局需求。通过监听窗口大小变化，动态调整各区域宽度及高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

主要通过 jQuery.resize() 这个方法，也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。

<div id="header"></div>
<div id="left"></div>
<div id="right"></div>

$(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);
}

Demo:http://www.coderhome.net/demo/f.html

文章来源：http://www.coderhome.net/zifa/archives/618