需要设置宽度为整个浏览器宽度的div，当然我们可以使用相对布局的方式做到这一点，下面是具体实现，大家可以参考下

有时候我们需要设置宽度为整个浏览器宽度的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,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...

  2. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  3. CSS3 resize属性 调整div大小

    resize 用户可调整div大小  IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...

  4. 算法(第四版)学习笔记之java实现可以动态调整数组大小的栈

    下压(LIFO)栈:可以动态调整数组大小的实现 import java.util.Iterator; public class ResizingArrayStack<Item> imple ...

  5. iOS7动态调整文字大小

    iOS7添加了动态调整文字的大小,app可以通过接受通知的方式进行设置 iOS 7 introduces Dynamic Type, which makes it easy to display gr ...

  6. jquery 拖动改变div大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js判断浏览器的类型，动态调整div布局

    最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function sc ...

  8. 拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var delta ...

  9. JavaScript鼠标拖动div且可调整div大小

    http://www.softwhy.com/article-5502-1.html <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. centos vim 7.3 升级 + vim 简单配置文件

    CentOS5自带VIM为2006年的7.0版本,现在很多插件都是针对7.3开发的,决定编译升级VIM7.3版. 编译安装VIM7.3: cd /usr/local/src/ wget ftp://f ...

  2. Linux配置虚拟主机后，只能访问到主页怎么办？

    Linux配置虚拟主机后,只能访问到主页怎么办? 今天配置了lamp后,添加了一个虚拟主机,配置http.conf后,增加虚拟主机,测试访问发现只有域名下能访问,ljt.com但是域名下所有的都访问不 ...

  3. C语言之基本算法08—去掉最高分去掉最低分求平均值

    // /* ================================================================== 题目:选拔赛中通经常使用这种办法求选手分数,去掉一个最 ...

  4. 【Linux】监控系统的状态

    1.w命令 w命令是一个很强大的命令,该命令显示的信息比较丰富.以下是我的虚拟机w命令的一个展示 从上图我们可以看到: 第一行从左面开始显示的信息依次为:时间.系统运行时间.登陆用户数.平均负载 第二 ...

  5. 6. Laravel5学习笔记：IOC/DI的理解

    介绍 IOC 控制反转 Inversion of Control 依赖关系的转移 依赖抽象而非实践 DI 依赖注入 Dependency Injection 不必自己在代码中维护对象的依赖 容器自己主 ...

  6. tcp_recvmsg 函数具体解释

    看了非常多网上关于tcp_recvmsg的文章,感觉解释的不太到位,或者非常多都是空口说白话,昨天分析了一下午tcp_recvmsg.感觉了解了十之八九,如今贴出来和大家分享一下. 须要背景:了解tc ...

  7. mysql导入慢

    MySQL导出的SQL语句在导入时有可能会非常非常慢,经历过导入仅45万条记录,竟用了近3个小时.在导出时合理使用几个参数,可以大大加快导 入的速度. -e 使用包括几个VALUES列表的多行INSE ...

  8. .Net 程序员面试 C# 语言篇 (回答Scott Hanselman的问题)

    过去几年都在忙着找项目,赶项目,没有时间好好整理深究自己在工作中学到的东西.现在好了,趁着找工作的这段空余时间,正好可以总结和再继续夯实自己的.Net, C#基本功.在05年的时候,Scott Han ...

  9. intellij中常用的快捷键

    intellij快捷键

  10. Linux中history历史命令使用方法详解

    当你在玩Linux的时候,如果你经常使用命令行来控制你的Linux系统,那么有效地使用命令历史机制将会使效率获得极大提升.事实上,一旦你掌 握了我在下面给出的15个有关Linux history历史命 ...