有时候我们需要设置宽度为整个浏览器宽度的div，当然我们可以使用相对布局的方式做到这一点，不过我们也可以用jquery来实现。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery test</title>

<script src="jquery-1.11.1.min.js"></script>

<style type="text/css">

	.show

	{

		width: 500px;

		height: 50px;

		background-color: red;

	}

</style>

</head>

<body>

<div class="show"></div>

<script>

	var browser_width  = $(document.body).width();

	$("div.show").css("width",browser_width);

	$(window).resize(function() {

		browser_width  = $(document.body).width();

  		$("div.show").css("width",browser_width);

	});

</script>

</html>

我们使用$(document.body).width()获取浏览器内容的宽度，在加载页面的时候我们初始化该div的宽度为浏览器页面的宽度，然后每当浏览器大小调整的时候，都会触发resize函数，此时我们再次对该div的宽度进行调整。

jquery入门 动态调整div大小，使其宽度始终为浏览器宽度的更多相关文章

  1. jquery动态调整div大小使其宽度始终为浏览器宽度

    需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,下面是具体实现,大家可以参考下 有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点 ...

  2. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  3. jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  4. CSS3 resize属性 调整div大小

    resize 用户可调整div大小  IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...

  5. 算法(第四版)学习笔记之java实现可以动态调整数组大小的栈

    下压(LIFO)栈:可以动态调整数组大小的实现 import java.util.Iterator; public class ResizingArrayStack<Item> imple ...

  6. iOS7动态调整文字大小

    iOS7添加了动态调整文字的大小,app可以通过接受通知的方式进行设置 iOS 7 introduces Dynamic Type, which makes it easy to display gr ...

  7. JQuery UI - resizable调整区域大小

    JQuery UI - resizable   ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable ...

  8. js判断浏览器的类型，动态调整div布局

    最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function sc ...

  9. 拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var delta ...

随机推荐

  1. Android adb push 和 adb pull

    将电脑 D 盘 libreference-ril.so 文件拷贝到安卓设备的 /system/lib 目录下 $ adb remount $ adb root $ adb push D:\libref ...

  2. 记一次socket_create()函数耗时异常记录

    背景: 下午开发时突然整个页面耗时增加,空接口每次都需要2-3秒的耗时,一开始以为连开发环境数据库出现问题,最后断开数据库跑,发现还是很慢 最终逐步调试此页面耗时,定位到了socket_create( ...

  3. sed命令n，N，d，D，p，P，h，H，g，G，x解析

    1.sed执行模板=sed '模式{命令1;命令2}'即逐行读入模式空间,执行命令,最后输出打印出来2.为方便下面,先说下p和P,p打印当前模式空间内容,追加到默认输出之后,P打印当前模式空间开端至\ ...

  4. golang之交叉编译设置

    俺的环境,os x,目的,生成64位linux的elf文件 直接下载osx的包就可以,不需要特意去下载源码包,我的go目录是~/golang/go cd ~/golang/go/srcGOOS=lin ...

  5. GOF23设计模式之享元模式（flyweight）

    一.享元模式概述 内存属于稀缺资源,不要随便浪费.如果有很多个完全相同或相似的对象,可以通过享元模式,节省内存. 享元模式核心: (1)享元模式可以共享的.方式高效的支持大量细粒度对象的重用: (2) ...

  6. Linux Shell read命令

    linux read 用法 1.基本读取 read命令接收标准输入(键盘)的输入,或其他文件描述符的输入(后面在说).得到输入后,read命令将数据放入一个标准变量中.下面是 read命令 的最简单形 ...

  7. easyui-datebox设置只能选择年月，设置当前月的第一天和最后一天

    来源:https://www.cnblogs.com/xiaoxiao0314/p/7041731.html 1. 设置只能控件只能显示年月:search_date_monthreport为控件id, ...

  8. [转][Java]语法规范

    先来个 阿里的 Java 开发手册(2017.5.20 发布 v1.2.0 .pdf) 本文来自:http://blog.csdn.net/sinat_27115575/article/details ...

  9. Windows2012使用笔记

    一.介绍 win 2012的名字于北京时间2012年4月18日公布,全称Windows Server 2012(下面简称win 2012),正式版于2012年9月4日发布.这是一套基于Windows ...

  10. springmvc 打包遇到的问题

    1.测试有错误,过不去,mvn install -DSkipTests 2.设置resources路径,在pom.xml中添加 <build> <resources> < ...