css开发技巧(1)_元素的高度与 window 的高度相同/使元素与窗口一样高

茶一蛊

已于 2022-03-06 09:27:27 修改

阅读量950

点赞数

分类专栏： css 文章标签： css html

于 2022-03-06 09:24:55 首次发布

本文链接：https://blog.csdn.net/qq_26905813/article/details/123305684

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用 height: 100vh;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			.ceshi {
				width: 100%;
				height: 100vh;/*元素的高度与 window 的高度相同*/
				line-height: 100vh;
				text-align: center;
				font-size: 50px;
				color:#fff;
				background-color: mediumvioletred
			}
		</style>
	</head>
	<body>
		<div class="ceshi">
			测试
		</div>
	</body>
</html>

测试效果
在这里插入图片描述
vh

css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

优惠劵

茶一蛊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css开发技巧(1)_元素的高度与 window 的高度相同/使元素与窗口一样高

使用 height: 100vh;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .ceshi { width: 100%; height: 100
复制链接

扫一扫