`
hegz
  • 浏览: 441286 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

jQuery实现布局高宽自适应

阅读更多

在页面布局(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

 

 

分享到:
评论

相关推荐

    jQuery实现布局高宽自适应的简单实例

    总结来说,文章所介绍的jQuery实现布局高宽自适应实例,虽然在现代前端开发中CSS已能够承担更多的责任,但其仍然展示了通过JavaScript处理动态布局调整的基本思想和方法。这些方法在一些特定的情况下依旧有其适用性...

    基于jquery的slide图片切换,高宽自适应.rar

    本插件支持一个页面多次使用,自动播放切换图片列表,具备图片预加载功能,重置图片宽度,可以自动适应图片的宽和高以适应指定的宽高,可以指定图片列表,指定切换... 飞飞图片宽高自适应的slide幻灯片切换jQuery插件

    WPF tab宽度自适应 可关闭

    以下将详细讲解如何实现“WPF TabControl”的可关闭功能以及宽度自适应。 一、添加可关闭按钮 1. 创建一个新的`TabItem`模板:首先,我们需要创建一个自定义的`DataTemplate`,在其中添加一个可以关闭的按钮。通常...

    可变高宽的圆角框————html+css

    然而,如何创建一个既能保持圆角效果又能在不同屏幕尺寸下自适应的布局,一直是前端开发者的挑战之一。本文将基于给定的代码示例,深入解析如何使用HTML和CSS来实现可变高宽的圆角框。 #### 1. 圆角框的基本原理 ...

    纯Css实现Div高度根据自适应宽度(百分比)调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而,用的最多的标签一哥Div却不能做到自动调整(要么从父级继承,...

    关于自适应屏幕方向和大小的一些经验.doc.zip

    8. **JavaScript解决方案**: 除了CSS,JavaScript库如Bootstrap或jQuery也可以帮助处理屏幕适配问题,例如,通过监听窗口的resize事件来动态调整布局。 9. **自适应视频和音频**: 视频和音频内容也需适应不同的屏幕...

    css控制宽度(高度)自适应100%

    高度自适应100%常用于实现全屏布局,例如“头、身体、脚”的页面结构。为了使元素高度填充整个屏幕,可以使用CSS的`vh`单位(viewport height,视口高度): ```html &lt;!DOCTYPE html&gt; html, body { margin:...

    CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

    本文将详细介绍如何使用CSS实现“左侧固定宽,右侧自适应”的布局,并确保兼容所有浏览器。这种布局常见于各种网站,比如博客、新闻网站或者含有侧边栏的页面。 首先,我们要明确“左侧固定宽,右侧自适应”的布局...

    Hongru-Box 自定义的Js弹出层插件

    内容索引:脚本资源,Ajax/JavaScript,弹出层,DIV ... 高宽自适应内容高宽的box  不带预载动画的box  延迟自动消失的box  title自定义的box  不带标题栏的的box  不带标题栏关闭按钮的box  带按钮和回调参数的box

    openBox插件动态弹出遮罩层,可关闭,多个实例.rar

     不设任何options参数的box(默认弹出... 高宽自适应内容高宽的图片box  不带预载动画的box  延迟自动关闭的box  title自定义的box  不带标题栏的的box  不带标题栏关闭按钮的box  带按钮和回调参数的box

    Hongru-Box 点击鼠标弹出盒子的小插件

    内容索引:脚本资源,Ajax/JavaScript,弹出层,... 高宽自适应内容高宽的图片box  不带预载动画的box  延迟自动关闭的box  title自定义的box  不带标题栏的的box  不带标题栏关闭按钮的box  带按钮和回调参数的box

    什么是高宽课程.doc

    高宽课程是一种以儿童为中心,注重主动学习的幼儿园课程模式,它的核心理念是让孩子们通过积极参与,主动探索,从而对周围的世界产生高度的热情和广泛的兴趣。这种课程模式围绕着五个主要内容领域,即“学习方式”、...

    微信小程序-微信小程序图片自适应,微信小程序富文本解析

    小程序图片高宽没法自动适配,只能指定高宽进行裁剪。在详情页显示体验很差,用image组件的bindload解决 富文本解析 小程序没有提供富文本解析, 服务端可以转换为json(当然前端也可以有个js库解决html2json)在小程序...

    jQuery.artZoom旋转放大图片

    jQuery.artZoom插件是基于jQuery的一个扩展,专门用于实现图片的交互式放大和旋转功能。这个插件允许用户在不离开当前页面的情况下,对图片进行放大查看,同时还能自由旋转图片,提供更好的用户体验。 **插件特点**...

    文本有关的样式和jQuery求对象的高宽问题分别说明

    在进行WEB开发过程中,文本处理和DOM元素的尺寸获取是十分...综上所述,当开发WEB页面时,合理运用CSS的文本样式属性和jQuery提供的尺寸获取方法,可以有效地处理文本内容的显示与布局,提升页面的美观度和用户体验。

    jQuery图片裁剪插件 功能非常强大

    上次我们介绍过一款基于HTML5的图片马赛克效果,今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的...

    关于rem的一切,这里全都有_能“等比例”适配所有屏幕尺寸教程.zip屏幕自适应

    "rem"(Root Em)单位是实现这种自适应布局的关键工具之一。本教程将深入探讨rem单位,以及如何利用它进行屏幕适配。 **一、rem单位的定义与特性** rem(root em)单位是指相对于根元素(通常是`&lt;html&gt;`标签)字体...

    jQuery设置指定网页元素宽度和高度的方法

    接下来,我们需要在文档加载完成后执行jQuery代码,这通常通过`$(document).ready()`函数实现。当整个文档加载完毕后,这个函数内的代码才会执行,确保所有DOM元素都已经准备就绪。 在示例代码中,我们创建了一个...

Global site tag (gtag.js) - Google Analytics