有时候我们需要设置宽度为整个浏览器宽度的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. 系列文章--Enterprise Library文章总结

    自Enterprise Library 1.1 推出以来,Terry写了一系列的关于Enterprise Library的文章,其中得到了很多朋友的支持,在这里一并表示感谢.为了方便大家的阅读,这里我 ...

  2. [转]使用tcpdump抓取HTTP包

    tcpdump -XvvennSs 0 -i eth0 tcp[20:2]=0x4745 or tcp[20:2]=0x4854 0x4745 为"GET"前两个字母"G ...

  3. B-tree & B+tree & B*Tree 结构浅析——转

    转自http://www.cnblogs.com/coder2012/p/3330311.html http://blog.sina.com.cn/s/blog_6776884e0100ohvr.ht ...

  4. STL容器的resize方法

    刚才写DFS程序,为了加个创建DFS树然后再次遍历的功能,把初始化的代码给封装到init()函数里,然后直接调用之后对同样是邻接表表示的DFS树进行DFS. 然后令人诧异的是竟然没有打印结果,调试发现 ...

  5. linux下使用tar命令详解

    解压语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项: c 创建新的档案文件.如果用户想备份一个目录或 ...

  6. Juicer自定义函数

    首先,先写自定义的方法: function (sex) { ; ; var Range = Max - Min; var Rand = Math.random(); var res = (Min + ...

  7. 数据结构与算法JavaScript描述——使用队列

    1.使用队列:方块舞的舞伴分配问题 前面我们提到过,经常用队列模拟排队的人.下面我们使用队列来模拟跳方块舞的人.当 男男女女来到舞池,他们按照自己的性别排成两队.当舞池中有地方空出来时,选两个队 列中 ...

  8. python学习 (三十一) python中的class

    1 python的类:   Python类都继承自object. __init__: 构造函数,如果不写,有一个默认的. __init__: 这个构造函数只能有一个,Python中不能有多个构造函数. ...

  9. supervisor+uwsgi+django遇到writing to a closed pipe/socket/fd解决

    原因: 最近开发的一个项目,由于有个更新job需要消耗的时间非常长,一度以为更新出现了错误. 经过: 于是打开debug模式测试, 异常开启,调试发现system返回了 writing to a cl ...

  10. Python - Pyinstaller

    安装 Pyinstaller pip install pyinstaller 使用: test.py print("Hello World!") 命令行输入 pyinstaller ...