博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery动态调整div大小使其宽度始终为浏览器宽度
阅读量:4841 次
发布时间:2019-06-11

本文共 776 字,大约阅读时间需要 2 分钟。

需要设置宽度为整个浏览器宽度的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的宽度进行调整。

转载于:https://www.cnblogs.com/sjqq/p/6410605.html

你可能感兴趣的文章
Python快速教程(转载)
查看>>
mysql事务
查看>>
【JMeter4.0学习(十)】之JMeter函数简单运用以及结合正则表达式提取器
查看>>
差分数组原理及应用
查看>>
Java switch case 语句
查看>>
SELinux 关闭方法
查看>>
ffmpeg 从内存中读取数据
查看>>
Entity Framework CodeFirst For Oracle
查看>>
Django 中间件 在其他语言中,有人叫这个管道
查看>>
Jython学习day01
查看>>
枚举的定义以及使用
查看>>
win7搭建php7+apache2.4
查看>>
全排列
查看>>
微机的接口技术(二)
查看>>
Axis2 POJO实现WebService(二)客户端调用
查看>>
oracle11g导出空表
查看>>
开始阅读《具体数学》
查看>>
资治通鉴-司马光
查看>>
js拖动效果
查看>>
海信POS机可编程键值定义
查看>>