有时候我们需要设置宽度为整个浏览器宽度的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. Python 3 利用 Dlib 和 sklearn 人脸笑脸检测机器学习建模

    0. 引言 利用机器学习的方法训练微笑检测模型,输入一张人脸照片,判断是否微笑: 精度在 95% 左右( 使用的数据集中 69 张没笑脸,65 张有笑脸 ): 图1 测试图像与检测结果 项目实现的笑脸 ...

  2. css之选择器的认识

    css中有大量的选择器,主要用来精准的找到代码中的某一段或者某一个段落,并对其样式进行选择和改变. 首先介绍的第一个选择器是: 1,基本选择器: 直接找到标签对其进行样式修正,不论标签藏多深,或者数量 ...

  3. php处理字符串格式的计算表达式

    有时候我们对每一种产品都有一个提成公式,而这个计算提成的公式是以字符串格式存在表中的 当我们用这个计算公式时,他并不像我们写的:$a=2+3*5;这样简单的能计算出结果,而它是个字符串 所以,我们就必 ...

  4. CSV 参数化

    配置CSV Data Set Config 图 3 配置CSV Data Set Config Filename:                        指保存信息的文件目录,可以相对或者绝对 ...

  5. 解决： Project facet Java version 1.8 is not supported

    背景 从别处Import一个Java project之后,Eclipse提示“Project facet Java version 1.8 is not supported”. 分析 从错误的描述来看 ...

  6. java程序中的ibatis连接mySql的基本实例

    属性文件:SqlMap.properties driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/ibatis username= ...

  7. SpringMVC传统风格控制器和基于注解的控制器

    SpringMVC的DispatcherServlet 之前说过springMVC是使用Servlet作为控制器,就是这个用于调度的DispatcherServlet了.这个是servlet,可以根据 ...

  8. socket_udp客户端循环输入

    server--------------#!/usr/bin/env python # encoding: utf-8  # Date: 2018/6/7 from socket import * s ...

  9. 如何实现session共享

    http://www.cnblogs.com/xiehuiqi220/p/3592300.html 首先我们应该明白,为什么要实现共享,如果你的网站是存放在一个机器上,那么是不存在这个问题的,因为会话 ...

  10. Node.js的适用场景

    高并发.聊天.实时消息推送.服务器做前端资源压缩