如何让div的大小占满整个屏幕?

一、先来代码

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             *{  
  8.                 margin: 0;  
  9.                 padding: 0;  
  10.             }  
  11.             html,body{  
  12.                 height: 100%;  
  13.                 width: 100%;  
  14.             }  
  15.             .test{  
  16.                 height: 100%;  
  17.                 width: 100%;  
  18.                 background: #EE6AA7;  
  19.             }  
  20.         </style>  
  21.     </head>  
  22.   
  23.     <body>  
  24.        <div class="test"></div>  
  25.     </body>  
  26.   
  27. </html>  
二、原因在这里

1、如果要以百分比设置元素(div)的尺寸,必要以父元素的尺寸作为参考,如果父元素没有设置尺寸,那么子元素(div)尺寸自然不会生效。
2、所以如果设置div的高度为100%,那么他的参考元素就是是body,那么如何设置body的尺寸呢?
3、在怪异模式下,body可以作为根元素,设置它的高度为100%的时候(不考虑外边距),body的高度取是浏览器的高度。
4、在标准模式下,html元素才是根节点,div的父元素是body,body的父元素是html,然后html设置为100%,取得是浏览器的高度,body高度设置为100%,得到的是html的的高度,所以最好同时设置html,body{height: 100%;width: 100%;}。
5、因为默认body的margin:8px,所以如果div想占据全屏,需要设置*{margin: 0;padding: 0;}

三、简述名词

标准模式是指,浏览器按W3C标准解析执行代码。

怪异模式则是使用浏览器自己的方式解析执行代码(在网页的最顶端没有<!DOCTYPE html>),因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

四、后言

前端小白一枚,如果有错误的地方还请告知,谢谢。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

如何让div的大小占满整个屏幕?

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭