css铺满的方法

最新推荐文章于 2024-04-20 18:01:19 发布

在路上等

最新推荐文章于 2024-04-20 18:01:19 发布

阅读量1.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42327537/article/details/109496810

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}

			* {
				margin: 0;
				padding: 0;
			}

			#tble {
				background-color: red;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="tble">

		</div>
	</body>
</html>

通过设置html,body的宽高来让div充满屏幕

<style>
      div {
      	background-color: red;
      	width:100vw;
      	height:100vh; 
      }
      * {
      	margin: 0;
      	padding: 0;
      }

</style>


<body>

<div></div>

</body>

2.可视窗口（Viewport）的宽度，1vw等于viewport宽度的1%

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width:100%;
            height: 100%;
            background: yellow;
            position: absolute;
        }

</style>



<body>

<div></div>

</body>

3.在body只有一个div的时候，可以通过这样的方式让position撑满整个屏幕。　fixed:固定定位,相对于浏览器窗口进行定位 absolute:绝对定位，相对于父级元素进行定位都可以

在路上等

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css铺满的方法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; } #tble { background-
复制链接

扫一扫