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

最新推荐文章于 2024-05-03 02:10:24 发布

chunchun1230

最新推荐文章于 2024-05-03 02:10:24 发布

阅读量3.8w

点赞数 3

分类专栏： HTML+CSS技术文档

本文链接：https://blog.csdn.net/chunchun1230/article/details/80249298

版权

HTML+CSS技术文档专栏收录该内容

17 篇文章 1 订阅

订阅专栏

在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>

chunchun1230

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
让div撑满整个屏幕的方法（css）

在body只有一个div的时候，可以通过这样的方式让div撑满整个屏幕。1.给div设置定位。　　复习一下——　　css中position有五种属性：　　　　static:默认值，没有定位　　　　absolute:绝对定位，相对于父级元素进行定位　　　　relative:相对定位　　　　fixed:固定定位,相对于浏览器窗口进行定位　　　　inherit:从父元素继承定位信息　　除了默认值stat...
复制链接

扫一扫