首页 > Web开发 > 详细

让div撑满整个屏幕的方法(css)

时间:2017-03-06 23:59:47      阅读:498      评论:0      收藏:0      [点我收藏+]

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

 

让div撑满整个屏幕的方法(css)

原文:http://www.cnblogs.com/cnyaokai/p/6512519.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!