CSS基础小TIP--占满全屏

最新推荐文章于 2021-07-12 10:28:05 发布

weixin_33881753

最新推荐文章于 2021-07-12 10:28:05 发布

阅读量74

点赞数

原文链接：https://juejin.im/post/5cb68e62e51d456e4c4c000f

版权

HTML部分

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
	<div class="conteinre">

	</div>
</body>
</html>
复制代码

CSS部分

1

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
复制代码

扩展：

占满父元素（父元素需要加位置属性）;
绝对定位的参考起始点
父元素尺寸固定

tip:top,right,bottom,left的值可以是其他有效单位；

2

html {
    height: 100%;
}
body {
    height:100%;
}
.container {
    height: 100%;
}
复制代码

weixin_33881753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础小TIP--占满全屏

HTML部分<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>demo</title></head><body> <div class="conteinre"> </...
复制链接

扫一扫