有时候我们需要设置宽度为整个浏览器宽度的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. 12.Python使用requests发送post请求

    1.我们使用postman进行接口测试的时候,发现POST请求方式的编码有3种,具体的编码方式如下: A:application/x-www-form-urlencoded ==最常见的post提交数 ...

  2. CMapStringToPtr添加与释放

    // 创建MapStringToPtr CMapStringToPtr m_prjFiles; CStringList m_fileList; m_fileList.AddTail(_T(" ...

  3. CDH5.10.0 离线安装(共3节点) 转

    1.安装方式 CDH的离线部署安装,即Parcel包(推荐) 2.角色规划 三个节点对应的角色: 3.基本环境配置(在每个节点上都要配置) (1)关闭防火墙 #/etc/init.d/iptables ...

  4. RAC的时间同步问题

    今天在两个节点上面安装RAC,在安装clusterware的时候OUI总是提示失败.查到资料的得知: 特此记录: 需要在在所有的集群节点上设置正确的日期和时间 在安装 Oracle 集群件.数据库以 ...

  5. PoJ 1595 PrimeCuts

    Prime Cuts Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9339   Accepted: 3562 Descri ...

  6. 未注册在本地的Windows 2008 / Windows 7 X64的：'Microsoft.Jet.OLEDB.4.0'提供

    在服务器上部署项目的时候遇到如下错误:'Microsoft.Jet.OLEDB.4.0'提供在本地没有注册 服务器是WIN2008 导致这个错误主要有几个原因: 1,服务器上没有装MS Excel中的 ...

  7. mysql导出数据库数据及表结构

    1,导出远程数据库数据到本地 mysql -A wj_sms -h192.168.1.105 -uroot -p4321 -ss -e "set NAMES 'utf8';SELECT * ...

  8. MySQL多项模糊查询

    最近有个需求,就是要根据搜索框里面的关键字,找到符合条件的数据. 如果是单个条件的话,其实就是一个普通的select语句. 但是需求是这个关键字,要在id,desc,step等多个字段模糊查找. 然后 ...

  9. Spring之导入和混合配置

    在典型的Spring应用中,我们可能会同时使用自动化和显式配置.即便你更喜欢通过JavaConfig实现显式配置,但有的时候XML却是最佳的方案.幸好在Spring中,这些配置方案都不是互斥的.你尽可 ...

  10. [转] C#调用外部DLL

    原文地址 每种编程语言调用DLL的方法都不尽相同,在此只对用C#调用DLL的方法进行介绍.首先,您需要了解什么是托管,什么是非托管.一般可以认为:非托管代码主要是基于win 32平台开发的DLL,ac ...