让div撑满整个屏幕的方法（css）

最新推荐文章于 2024-04-20 18:12:06 发布

飞翔的熊blabla

最新推荐文章于 2024-04-20 18:12:06 发布

阅读量3.1k

点赞数 1

分类专栏： react html+js+jquery+css

原文链接：https://www.cnblogs.com/cnyaokai/p/6512519.html

版权

html+js+jquery+css 同时被 2 个专栏收录

642 篇文章 14 订阅

订阅专栏

react

115 篇文章 2 订阅

订阅专栏

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520工具,高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

转载于:http://localhost:11212/sale-v2/mgm/record

在body只有一个div的时候，可以通过这样的方式让div撑满整个屏幕。

1.给div设置定位。

　　复习一下——

　　css中position有五种属性：

　　　　static:默认值，没有定位

　　　　absolute:绝对定位，相对于父级元素进行定位

　　　　relative:相对定位

　　　　fixed:固定定位,相对于浏览器窗口进行定位

　　　　inherit:从父元素继承定位信息　　

除了默认值static和inherit之外，添加其他三种都可以实现窗口自适应。

代码如下：

复制代码

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         div{
 7             width:100%;
 8             height: 100%;
 9             background: yellow;
10             position: absolute;
11         }
12 
13 </style>
14 
15 
16 <body>
17 
18 <div></div>
19 
20 </body>

复制代码

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

复制代码

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         html,body{
 7             width: 100%;
 8             height: 100%;
 9         }
10         div{
11             width:100%;
12             height: 100%;
13             background: yellow;
14         }
15 </style>
16 
17 <body>
18 <div></div>
19 </body>

复制代码