jquery动态调整div大小使其宽度始终为浏览器宽度
需要设置宽度为整个浏览器宽度的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大小使其宽度始终为浏览器宽度的更多相关文章
- jquery入门 动态调整div大小，使其宽度始终为浏览器宽度
有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- CSS3 resize属性 调整div大小
resize 用户可调整div大小 IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...
- 算法(第四版)学习笔记之java实现可以动态调整数组大小的栈
下压(LIFO)栈:可以动态调整数组大小的实现 import java.util.Iterator; public class ResizingArrayStack<Item> imple ...
- iOS7动态调整文字大小
iOS7添加了动态调整文字的大小,app可以通过接受通知的方式进行设置 iOS 7 introduces Dynamic Type, which makes it easy to display gr ...
- jquery 拖动改变div大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js判断浏览器的类型，动态调整div布局
最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function sc ...
- 拖拽调整Div大小
今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var delta ...
- JavaScript鼠标拖动div且可调整div大小
http://www.softwhy.com/article-5502-1.html <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- Android 内存泄漏分析利器——leakcanary
LeakCanary Android 和 Java 内存泄露检测. “A small leak will sink a great ship.” - Benjamin Franklin 千里之堤, 毁 ...
- unity3d格式的导出与加载
http://blog.csdn.net/nateyang/article/details/7567831 1.导出.unity3d格式资源: http://game.ceeger.com/Scrip ...
- 第【一】部分Netzob项目工具的安装配置
第[一]部分Netzob项目工具的安装配置 声明: 1)本报告由博客园bitpeach撰写,版权所有,免费转载,请注明出处,并请勿作商业用途. 2)若本文档内有侵权文字或图片等内容,请联系作者bitp ...
- Android4.4 SystemUI加入Dialog弹窗
此弹窗为开机SystemUI的显示弹窗: 首先.在SystemUI的源代码文件夹加入源代码类文件,文件夹为frameworks/base/packages/SystemUI/src/com/andro ...
- linux中的strip命令简介------给文件脱衣服
1.去掉-g,等于程序做了--strip-debug2.strip程序,等于程序做了--strip-debug和--strip-symbol 作为一名Linux开发人员, 如果没有听说过strip命令 ...
- CSS3实现加载中的动画效果
本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...
- js操作时间 加法 减法 计算 格式化时间
Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d ...
- Python Kivy 安装问题解决
Fix: Running this was suggested by @matham in #3889 and solves the problem described below:python -m ...
- centos 安装cmake 3.3.2
先卸掉本身自带的 cmake 2.8 yum remove cmake cmake版本:3.3.2 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-deve ...
- window.print
function contentPrint(contentArea) { var initBody = document.body.innerHTML; if ($("div"). ...