有时候我们需要设置宽度为整个浏览器宽度的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. UML基本架构建模－－类的术语和概念

     Terms and Concepts 术语和概念   A classis a description of a set of objects that share the same attrib ...

  2. cacti监控linux主机时iptables阻碍了udp161端口造成无法监控解

    由于在添加linux主机时,有防火墙启用,造成无法监控linux主机,现有两种方法解决无法监控linux主机问题:可以通过在监控主机执行该命令: snmpwalk -c public -v 2c 19 ...

  3. centos7下安装oracle11gR2

    Centos7安装oracle11gR2说明 Centos7安装oracle11gR2说明 环境准备 安装Oracle前准备 创建运行oracle数据库的系统用户和用户组 创建oracle数据库安装目 ...

  4. linux通过wget直接下载jdk，避免用户验证

    下载地址 :http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 下载语句: wget ...

  5. NanoPiM1开箱测试

    等了快一周了,终于那M1与那外壳一起给我寄过来了. 上午收到,开箱图就不亮了,来一上好电的图! 一同购买来的MSD卡里什么也没有,上电测试时只看到绿色的灯微微亮(这是一个BUG吗!!!!哈哈). 所以 ...

  6. 用命令行cmd 编译小程序

    操作命令: C:\Users\Administrator>"C:\Program Files (x86)\MSBuild\12.0\Bin\csc.exe" /out:D: ...

  7. appium+python自动化31-android_uiautomator定位

    前言 appium就是封装android的uiautomator这个框架来的,所以uiautomator的一些定位方法也可以用 text 1.通过text文本定位语法 new UiSelector() ...

  8. python中break continue exit() pass区别

    1.break break是终止本次循环,比如你很多个while循环,你在其中一个while循环里写了一个break,满足条件,只会终止这个while里面的循环,程序会跳到上一层while循环继续往下 ...

  9. Java实现HTML转换为PDF的常见方法

    最近在自己的项目中需要动态生成融资单合同,这里需要把对应的html转换为对应的pdf融资合同.因此需要通过Java实现将HTML转PDF.自己之前没有接触过这一块的东西,所以上网查了一下,网上有很多的 ...

  10. questions information

    1. 面向对象 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 三大特性: 封装: -- 将内容封装到对象中 -- 将方法疯 ...