实现网页全屏的5种方式

第一种

使用html body设置宽高100%

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}div{width: 100%;height: 100%;background-color: lightskyblue;}img{width: 100%;height: 100%;}</style>
</head>
<body><div><img src="./2.jpg" alt=""></div>
</body>
</html>

第二种

使用height: calc(100vh)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}div{width: 100%;height: calc(100vh);background-color: lightskyblue;}img{width: 100%;height: 100%;}</style>
</head>
<body><div><img src="./1.jpg" alt=""></div>
</body>
</html>

第三种

使用绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}div{position: absolute;width: 100%;height: 100%;background-color: lightskyblue;}img{width: 100%;height: 100%;}</style>
</head>
<body><div><img src="./3.jpg" alt=""></div>
</body>
</html>

第四种

使用js document.body.clientHeight

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}html, body {width: 100%;height: 100%;}img{width: 100%;height: 100%;} </style>
</head>
<body><div><img src="./3.jpg" alt=""></div><script>let div  = document.querySelector('div')div.style.width = document.body.clientWidth+'px'div.style.height = document.body.clientHeight+'px'</script>
</body>
</html>

第五种

使用jquery $(window).height()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery.min.js"></script><style>*{margin: 0;padding: 0;}html, body {width: 100%;height: 100%;}img{width: 100%;height: 100%;} </style>
</head>
<body><div><img src="./4.jpg" alt=""></div><script>$('div').width($(window).width())$('div').height($(window).height())</script>
</body>
</html>

实现网页全屏的5种方式相关推荐

Java JFrame实现全屏的四种方式
JFrame实现全屏的四种方式,方式一: import java.awt.*; import javax.swing.*; public class FullScreenDemo1 { public ...
微信小程序视频全屏显示4种方式
视频全屏显示4种方式示例库代码片段
截取网页全屏的两种方法
截取网页全屏的方式很多时候我们需要对网页的全部内容进行一个截屏,但像微信或者QQ的截图方式只能截取当前页面的内容,下面介绍几种比较简单的截取页面全部内容的方法. 1.谷歌浏览器自带截图功能 2.使用 ...
vue点击网页全屏_vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能方式一:js实现全屏代码如下: 全屏 export default { name: "index", data(){ return{ fullscr ...
Android实现横竖屏、全屏的几种方式
1.Android实现横竖屏的方式: ① 在xml文件里面进行设置.一个是在activity的theme里面进行设置<item name = "windowOrientation&qu ...
Android全屏的三种方式
一.在Activity里面加入以下代码 this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(Wi ...
div铺满全屏的三种方式
继承法 <style>* {margin:0;padding:0;}html,body{height:100%;}.box{height:100%;background-color:blu ...
自动打开html网页脚本,开启网页全屏插件(自动开启网页全屏脚本js插件)
开启网页全屏插件(自动开启网页全屏脚本js插件)是由作者陈鹏杰分享的一个浏览器扩展插件.通过本脚本,用户在网页加载完4秒后,启动网页全屏.非常简单方便快捷! 脚本描述: 在以下网页开启网页全屏 b 站 ...
JSP网页全屏显示、退出全屏、关闭页面
[转]JSP网页全屏显示.退出全屏.关闭页面 jsp相关知识 2009-06-07 20:36:42 阅读108 评论0 字号:大中小订阅全屏显示 ---------------------- ...

实现网页全屏的5种方式

第一种

第二种

第三种

第四种

第五种

实现网页全屏的5种方式相关推荐

最新文章

热门文章