需要设置宽度为整个浏览器宽度的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. 类非静态成员的函数指针 的使用 Function pointer of a non-static member function of a class

    you can get the pointer of the method, but it has to be called with an object typedef void (T::*Meth ...

  2. Docker学习笔记之一，搭建一个JAVA Tomcat运行环境（转）

    前言 Docker旨在提供一种应用程序的自动化部署解决方案,在 Linux 系统上迅速创建一个容器(轻量级虚拟机)并部署和运行应用程序,并通过配置文件可以轻松实现应用程序的自动化安装.部署和升级,非常 ...

  3. Sphinx-实战

    配置完成后, 有了数据源.索引文件存储位置等, 便可以使用 indexer 工具创建索引, 收集要被检索的数据 -c 指定配置文件 默认使用 etc/sphinx.conf --all 对所有索引重新 ...

  4. CSS3Transition添加多个过渡效果

    本篇文章由:http://xinpure.com/css3transition-to-add-multiple-transition-effects/ 通过监听动画的结束事件,可以为一个元素添加多个动 ...

  5. unity3d世界坐标系和本地坐标系

    transform.Translate(Vector3.forware);//向着自己坐标前方 transform.Translate(Vector3.forware,Space.World);//向 ...

  6. unity, List namespace

    如果要使用List,需要using System.Collections.Generic;

  7. atitit. it软件项目管理---自己的员工，雇佣军、援军，混合的员工 杂牌 人员管理架构

    atitit. it软件项目管理---自己的员工,雇佣军.援军,混合的员工 杂牌 人员管理架构 1. 企业的正规军,雇佣军,杂牌划分 1 1.1. 企业的员工基本是雇佣而来 1 1.2. 全职员工与兼 ...

  8. Atitit.常用分区api的attilax总结

    Atitit.常用分区api的attilax总结 1. Api 来源与oracle与mysql1 1.1. 分区定义partition by range (uid)  使用VALUES LESS TH ...

  9. Atitit. 。Jna技术与 解决 java.lang.Error: Invalid memory access

    Atitit. .Jna技术与 解决 java.lang.Error: Invalid memory access 1. 原因与解决1 2. jNA (这个ms sun 的)1 3. Code1 4. ...

  10. Apache伪静态Rewrite详解

    一.Rewrite规则简介:Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于 Perl语言.可基于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果要 ...