需要设置宽度为整个浏览器宽度的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. Windows下如何安装 Composer

    如何安装 Composer Windows下如何安装 Composer 下载 Composer 安装前请务必确保已经正确安装了 PHP.打开命令行窗口并执行 php -v 查看是否正确输出版本号. 打 ...

  2. es6常用数组操作及技巧汇总

    定义数组 const array = [1, 2, 3]; // 或者 const array = new Array(); array[0] = '1'; 检测数组 Array.isArray([] ...

  3. Oracle怎么导出存储过程

    Oracle怎么导出存储过程 http://www.myexception.cn/database/1564245.html 导出: 1, 2,点击输出文件,选择要导出文件,选择要导出的目录以及设置导 ...

  4. struts2 ValueStack的作用

    Value Stack的作用: 1.       可以作为一个数据中转站 2.       用于在前台-后台之间传递数据,最典型的做法就是struts2标签也ognl表达式的结合.我用得最多的就是数据 ...

  5. 你不知道的js技巧

    JS进阶 说起这个应该算是老生常谈了吧.所谓的高级,其实就是讲了一些我们平常用不到(或许用了不知道),但是非常实在的东西.算是熟练掌握js的一个必经road吧. 检测函数类型 其实检测函数的类型应该算 ...

  6. （转）ASP.NET MVC：Razor 引入命名空间

    页面中引用 c# @using MvcApplication83.Models @using MvcApplication83.Common 行尾不需要加分号,加上也无妨(不过得全加上). VB.Ne ...

  7. Memcached 测试

    Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...

  8. MOS管基本构造和工作原理

    (一)http://v.youku.com/v_show/id_XMTM2NzcwMjE5Ng==.html (二)http://v.youku.com/v_show/id_XMTM2NzcwMjMw ...

  9. PHP下用Memcache 实现消息队列

    Memcache 一般用于缓存服务.但是很多时候,比如一个消息广播系统,需要一个消息队列.直接从数据库取消息,负载往往不行.如果将整个消息队列用一个key缓存到memcache里面, 对于一个很大的消 ...

  10. 将HG版本库推送到Git服务器

    如何将HG版本库推送到Git服务器? 目的 习惯使用HG来进行版本管理,但是GitHub代码统计比Bitbucket要丰富,所以准备主力仓库选用Bitbucket,GitHub作为备用仓库. GitH ...