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 ...
随机推荐
- 3dmax做的模型导入U3d后 当模型靠近摄像机时镂空问题
使用3dMax Reset XForm下就好了. 原因可能是 法线方向问题?
- KVM Run Process之KVM核心流程
在"KVM Run Process之Qemu核心流程"一文中讲到Qemu通过KVM_RUN调用KVM提供的API发起KVM的启动,从这里进入到了内核空间执行,本文主要讲述内核中KV ...
- 使用xml-rpc调试openerp模块中的函数
运行openerp模块中的函数 有很多方式, 可以在视图中加个按钮然后点击它, 也可以在集成开发环境中强制执行它. 不过, 用python写个小脚本,xml-rpc调用直接执行它, 无疑是最简便的方法 ...
- 【BIEE】MDS-01377:无法从使用 JNDI 名称 “jdbc/mds/owsm” 配置的数据源获取数据库连接
这是一次意外关机情况,BIEE环境是window server2008,但是一次意外情况,BIEE自动关机了,造成开启成功新启动BIEE产生如下错误: 错误产生后,倒腾了半天,并没发现什么问题,只是通 ...
- struts2异常处理
<global-results> <result name="nullException">/WEB-INF/exception/nullException ...
- 利用Redis撤销JSON Web Token产生的令牌
利用Redis撤销JSON Web Token产生的令牌 作者:chszs.版权全部.未经允许,不得转载.博主主页:http://blog.csdn.net/chszs 早先的博文讨论了在Angula ...
- 【TP3.2】Call to a member function display() on a non-object问题的解决
Call to a member function display() on a non-object问题的解决
- 采用QHD分辨率使用kinect2_calibration,完成QHD图像校正
//.................................................................................//采用QHD分辨率使用kinec ...
- C# -- 使用递归列出文件夹目录及目录下的文件 神技do{}while(false)
C# -- 使用递归列出文件夹目录及目录下的文件 使用递归列出文件夹目录及目录的下文件 1.使用递归列出文件夹目录及目录下文件,并将文件目录结构在TreeView控件中显示出来. 新建一个WinFor ...
- 几种适配器&观察者&ListView之间的那点事
android中的几种适配器&观察者&ListView 1.我们知道Android中的Adapter类是处于ListView和数据源之间的数据总线,它负责为ListView提供数据. ...