码迷,mamicode.com
首页 > Web开发 > 详细

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

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

标签:body   css   定位   固定   code   fixed   idt   log   ati   

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

标签:body   css   定位   固定   code   fixed   idt   log   ati   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!