有时候我们需要设置宽度为整个浏览器宽度的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. oracle之 利用 controlfile trace文件重建控制文件

    一. 11g RAC 重建控制文件 1. --"create controlfile"命令生成到追踪文件中:alter database backup controlfile to ...

  2. 用oradebug short_stack及strace -p分析oracle进程是否dead或出现故障

    1,可以采用oradebug或者strace -p跟踪后台或前台进程是否dead或hang住2,如果进程出现故障,必会在对应的TRC文件写入最新信息,基于此可以获取非常重要的信息进一步分析与诊断    ...

  3. 学习 Git 玩转 GitHub

    原文地址:学习 Git 玩转 GitHub 博客地址:http://www.extlight.com 一.基本了解 1.1 什么是版本控制系统 版本控制系统是一种记录一个或若干个文件内容变化,以便将来 ...

  4. Nexus搭建私服

    什么是Nexus Nexus是一个强大的Maven仓库管理器,它极大地简化了本地内部仓库的维护和外部仓库的访问. 运行原理 本地仓库与私服处在同一个局域网中,当本地仓库没有资源时,会向私服发起请求获取 ...

  5. 【转载】最短路径—Dijkstra算法和Floyd算法

    注意:以下代码 只是描述思路,没有测试过!! Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始 ...

  6. laravel开启调试模式

    mvim app/config/app.php 'debug' => true,

  7. 建立SIP通话

    建立SIP: 点击下的出现的页面: 选择submit,只用填写用户名和密码就OK了,secret是密码,填写完以后记得应用 创建完毕以后,使用xlite去连接:xlite的配置:域名是asterisk ...

  8. 第七章 Rolling update

    7.1 实践 apiVersion: apps/v1beta1 kind: Deployment metadata: name: httpd spec: replicas: 3 template: m ...

  9. 【BZOJ】2006: [NOI2010]超级钢琴（前缀和+RMQ+堆）

    题目 传送门:QWQ 分析 又不会做....... 显然很好想到前缀和处理一下. 然后考虑最大化结果,直接上st表. 问题来了,然后呢? 怎么做$ length \in [l,r]  $ 呢? 正解是 ...

  10. mysqldumpl备份

    mysqldump --databases mydatabase --lock-all-tables --flush-logs mysqldump -h10. -uroot -p密码 --databa ...