有时候我们需要设置宽度为整个浏览器宽度的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. quick 状态机StateMachine

    function Player:addStateMachine() self.fsm_ = {} cc.GameObject.extend(self.fsm_) :addComponent(" ...

  2. nginx+php测试时显示 502 bad gateway的解决方法

    http://www.apelearn.com/study_v2/chapter18.html 由于阿铭老师的PHP版本是 5.3的   我装了 5.5 测试出现了 502  错误 查看日志   借助 ...

  3. promise的学习心得记录

    这里只讲promise,和async的使用方法,不会讲他们的原理. Promise 是异步编程的一种解决方案,可以用于取代传统的回调函数,该变那些函数层层嵌套调用的尴尬局面. 1)promise 基本 ...

  4. 完美版js金钱正则表达式校验

    <!doctype html> <html lang="en">  <head>   <meta charset="UTF-8& ...

  5. 没有80端口的备案域名，如何做微信公众平台的开发？本文介绍可以通过任何域名来做开发,www.baidu.com和www.163.com和www.so.com这样的域名都可以

    1.首先做过微信开发的朋友都知道,微信后台需要绑定80端口的备案域名,如果此时手上没有80端口的备案域名就不能进行开发了吗?当然不是 首先在这些地方绑定一个备案域名,国内公司的网址基本上是有备案的如w ...

  6. JAVA-Unit05： 视图、序列、索引 、 约束

    Unit05: 视图.序列.索引 . 约束 视图 数据库对象之一 视图在SQL语句中体现的角色与表相同, 但它并非一张真实存在的表,它对应的 是一个查询语句的结果集. 创建一个查看10号部门员工信息的 ...

  7. Fiddler移动端抓包

    有关手机抓包之前没有接触过,实际工作用到的不多,因此学了也就忘了. 来了新公司之后,产品主要以移动端为主,抓取线上线下包便成了平常之事,一些开发也会来请教如何在手机上抓包. 回归正题,抓取移动端包有很 ...

  8. PHP中实现函数重载

    转载自:http://cnn237111.blog.51cto.com/2359144/1284085 由于PHP是弱类型语言,因此函数的输入参数类型无法确定(可以使用类型暗示,但是类型暗示无法用在诸 ...

  9. 转 - 使用from __future__ import unicode_literals时要注意的问题

    原文链接: http://www.cnblogs.com/ajianbeyourself/p/4471035.html 使用from __future__ import unicode_literal ...

  10. Oracle定时值执行存储过程

    declare      jobno number;    begin      dbms_job.submit(     jobno,     'p_dosomething;',  --what   ...