需要设置宽度为整个浏览器宽度的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. [Unity3D]场景间切换与数据传递(以及物体删除技巧)

    http://blog.163.com/kingmax_res/blog/static/77282442201031712216508/ 先介绍一些基本函数(具体用法自己查文档):---------- ...

  2. Reading assignments in science

    First, get a perspective: Review the assignment in the syllabus and any handouts (1-2 minutes)Maybe ...

  3. 蓝的成长记——追逐DBA（6）： 做事与做人：小技术，大为人

    ***********************************************声明*************************************************** ...

  4. ACE中静态实例管理方式

    ACE中的很多类使用了单例模式,为了便于管理单例对象,ACE使用了一个组件——ACE_Framework_Component来专门管理. 我们以ACE_Reactor这个单例类的创建和释放为例. 1. ...

  5. 增强for循环、Map接口遍历、可变參数方法

    增强for循环 1.for循环能做得事情.增强for循环大部分都能做(假设要想获得下标的时候就必须使用简单for循环了) 2.增强for有时候可以方便的处理集合遍历的问题,可是集合的标准遍历是使用迭代 ...

  6. JAVA中的Session和Cookie【转】

    一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于才服务器端保持状态的 ...

  7. 02-hibernate注解-属性级别注解

    添加方式: 一是写在属性字段上面. 二是写在属性的get访问器上面. 主要有: @Id, @SequenceGenerator @GeneratedValue @Colum @Embedded @Em ...

  8. 在需要隐藏navigationController控制器

    - (void)viewWillAppear:(BOOL)animated {    [super viewWillAppear:animated]; [self.navigationControll ...

  9. Ajax高级应用---Comet

    非常适合处理体育比赛的分数和股票报价 1.HTTP流 将输出缓存中的内容一次性全部发送到客户端的功能是实现HTTP流的关键所在.

  10. FreeMarker静态化文件解决SEO推广问题

    1.问题背景 SEO一直是站点对外推广的一个重要手段,如何可以让搜索引擎高速搜索到站点对于增强站点的浏量,提升站点对外形象有着重要意义.那么如何可以对SEO进行优化呢?一个很经常使用的手段就是在网页的 ...