CSS高度铺满全屏的方法

方法一：

将body和html得高度设置为100%，再设置div高度为100%

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"></div>
</body></html>
<style>body, html {height: 100%}.box {width: 100%;height: 100%;background-color: red;}
</style>

方法二：

将要铺满全屏的元素脱离文档流

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"></div>
</body>
<style>.box {width: 100%;height: 100%;position: fixed;background-color: red;}
</style>

方法三：

使用vh，vh相对视口高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"></div>
</body>
<sytle>.box {width: 100vw;height: 100vh;background-color: red}
</style>

CSS高度铺满全屏的方法相关推荐

Vue-cli 中为单独页面设置背景图片铺满全屏的方法
Vue-cli 中为单独页面添加张背景图片从而达到铺满全屏的方法 <template><div id="logo"></div> </te ...
背景图片铺满全屏的方法
1.css3有一个属性:background-size:cover;可以让背景图片完全覆盖屏幕,但是IE9以下浏览器无效. 2.IE有个滤镜: filter:progid:DXImageTransfo ...
web图片铺满网页_html5的video的背景图片poster铺满全屏大小方法
html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了 ...
w10投影全屏设置_win10如何让投影仪铺满全屏
win10如何让投影仪铺满全屏?很多用户使用投影仪没有铺满,上下有空隙,不是全屏显示的,不知如何设置的用户,接下来就由小编教大家win10系统投影仪铺满全屏的设置方法吧. win10如何让投影仪铺满全 ...
html怎样使一个视频充满整个屏幕,抖音视频怎么铺满全屏
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 抖音视频铺满全屏的方法是: 1.首先打开手机设置,然后点开通用. 2.然后在通用里面,点开辅助功能. 3.在复制功能有个缩放,打开 ...
html网页自动铺满屏幕,HTML+CSS入门高度如何铺满全屏
本篇教程介绍了HTML+CSS入门高度如何铺满全屏,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < IE6不认识!important声明,IE7.IE8.Firefox. ...
网页铺满全屏，不需滚动条的设置方法
现在很多网页流行使用铺满全屏,没有滚动条,上下轮播的首页产品介绍页面.(如2345看图王,支付宝等官网) 这种页面简洁大气,美观实用.但对刚接触html和css的人来说却有些高大上,不知道改如何做. ...
html铺满整个页面_前端实践:怎么让一个HTML元素（标签）的区域铺满全屏？
现在很多网页都做得特别绚,因此很多时候大家都想着实现一些看上去吊炸天的效果,而这些前端的效果不管怎么华丽最原始的基础还是那一行行的代码,HTML+CSS+JS就是前端的三剑客. 今天我们就讲一讲我们最 ...
div三行或三列铺满全屏
文章目录一.实现要求二.实现过程 1. 字体水平居中和垂直居中 1.1水平居中: 1.2垂直居中: 2. 行列铺满全屏 2.1 竖排铺满全屏: 2.2 横排铺满全屏: 3. 实现交互三.实现代码 ...

CSS高度铺满全屏的方法

方法一：

方法二：

方法三：

CSS高度铺满全屏的方法相关推荐

最新文章

热门文章