有时候我们需要设置宽度为整个浏览器宽度的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. 【转】python 字符编码与解码——unicode、str和中文：UnicodeDecodeError: 'ascii' codec can't decode

    原文网址:http://blog.csdn.net/trochiluses/article/details/16825269 摘要:在进行python脚本的编写时,如果我们用python来处理网页数据 ...

  2. python 读取Linux服务器上的文件

    使用Python语句,读取Linux远端服务器上的文件打印到控制台的代码实现: 下载包:paramiko import paramiko #服务器信息,主机名(IP地址).端口号.用户名及密码 hos ...

  3. C# datatable竖行转换的问题

    这次在做项目中,遇到了这样一个问题:datable中列头的名字是不确定的,从数据库中动态查出来的,假设为typeDATA,行的数据中又包含了列头的信息,并按固定的字段分组,当查处行的数据之后用来填充每 ...

  4. 初学java记录

    记录一: if语句: if(x < y) System.out.println("x is less than y"); 记录二: 强制转换字符类型赋值的方法: num2= ...

  5. java代码=====实现修改while()

    总结: package com.mmm; public class cse { public static void main(String[] args) { // int count=0;你妹,我 ...

  6. 初学者手册-Sublime Text常用快捷键

    Alt + F3 :找出当前文档中所有被划选的词语,若文档很大的话,可能会导致Sublime Text崩溃. Ctrl + kkk :删除当前行光标至行尾的所有内容. End: 光标跳至行尾. Hom ...

  7. Sqlmap用法小结

    一共有七个等级0.只显示python错误以及严重的信息.1.同时显示基本信息和警告信息.(默认)2.同时显示debug信息.3.同时显示注入的payload.4.同时显示HTTP请求.5.同时显示HT ...

  8. win iso download

    http://rufus.akeo.ie/ window iso download http://win.86tyu.cn/ylmf32win7.html

  9. j2EE框架collection

    在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对抽象数据类型操作的API,而这是我们常用的且在数据结 ...

  10. 使用被动混合内容的方式来跨越浏览器会阻断HTTPS上的非安全请求（HTTP）请求的安全策略抓包详解

    /*通过传入loginId在token中附加loginId参数,方便后续读取指定缓存中的指定用户信息*/ GET /multitalk/takePhone.php?loginId=4edc153568 ...