有时候我们需要设置宽度为整个浏览器宽度的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. 老司机带带我，FIFO不简单

    FIFO,没有想象的那么简单! 根据一般的原则,FIFO这件事情啊,如果能用IP先别自己手写.可以通过FPGA厂家的的IP生成工具生成相应的FIFO. FIFO中的格雷码: 格雷码应用于异步FIFO的 ...

  2. python复习之路-Day01

    数据类型初识 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和 ...

  3. node的express中间件之directory

    direcotry中间件用于在浏览器中流出网站某个目录下的所有子目录及文件. app.use(express.directory(path,[options])); 查看网站根目录下的文件及目录 va ...

  4. Html 上手

    <!-- ctrl + / 注释 ctrl + D 复制整行 html:超文本标记语言标记 标签 元素格式<标签名>标签内容</标签名>标签的写法标签的正确嵌套标签特性 ...

  5. Solr 6.0 学习（五）solr基本查询和高级查询

    参考:http://www.cnblogs.com/rainbowzc/p/4354224.html 查询参数 常用: q - 查询字符串,必须的. fl - 指定返回那些字段内容,用逗号或空格分隔多 ...

  6. vim批量在文件每行添加内容以及查询cloudstack模板是否是增量

    一.接着上文(更改cloudstack二级存储),从cloud数据库里查出的所有模板名称以及模板位置语句 SELECT tpl.`name`,img.id, img.`url`,tplref.`ins ...

  7. C 语言 - Unicode 解决中文问题

    问题: 打印一句中文 #include <stdio.h> int main() { char str[] = "你好,世界"; printf("%s\n&q ...

  8. Python - Pyinstaller

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

  9. OD 实验(六) - 对一个程序的破解

    程序: 双击进行安装,安装过程默认就好了 安装完成 运行程序 输入 User 为 sch01ar,点击 Create 点击 Log In 这里显示为未注册版本 看看未注册版本有哪些功能被限制 这里会显 ...

  10. Python Strings

    1. Basic #Python treats single quotes the same as double quotes. var = 'haha' var = "666" ...