让div高度撑满屏幕的方法

时光怂恿深爱的人放手 提交于 2020-02-17 16:11:59

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

1.给div设置定位。

复习一下——

css中position有五种属性:

static:默认值,没有定位

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

relative:相对定位

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

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

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

在这里插入代码片
<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设为高度百分百

<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>
————————————————
版权声明:本文为CSDN博主「chunchun1230」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转

以上为转载
原文链接:https://blog.csdn.net/chunchun1230/article/details/80249298

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!