如何让div的大小占满整个屏幕?
一、先来代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;width: 100%;}.test{height: 100%;width: 100%;background: #EE6AA7;}</style></head><body><div class="test"></div></body></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的大小占满整个屏幕?相关推荐
- css实现div中图片占满整个屏幕
<div class="img"></div>.img{background: url("../assets/image/img.png" ...
- css图片满铺占满整个div不变形,16、css实现div中图片占满整个屏幕
新版 itextsharp pdf code using System; using iTextSharp.text; using iTextSharp.text.pdf; using System. ...
- 如何用css实现div高度自适应占满屏幕
如何用css实现div高度自适应占满屏幕 不能使用准确的px值,应该用%作为尺寸的单位. 在样式表中将html,body的高度height设置为100% 在要需要站满屏的div设置width:100% ...
- LabVIEW前面板占满整个屏幕
LabVIEW前面板占满整个屏幕 在运行一个LabVIEW程序时,它的前面板能够占据整个屏幕,且不显示Windows的任务栏或其他任何的LabVIEW菜单选项.怎样才能实现这一功能? 可以通过手动配置 ...
- 网页占满整个屏幕_CSS网页背景图片等比例占满整个页面的解决方案
需求是这样的: 一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个bug引起了我深入的思考.先上图,正常界面是这样的: 界面结构很简单,一个登录框,加一张背景图.我们都知 ...
- 微信小程序中使view占满整个屏幕高度的实现方法
前言: 今天做小程序的时候,在项目中要用到一个view占满屏幕高度和宽度,然后再在这个view里放置其他元素的情况. 宽度很简单,直接设置width: 750rpx;或者width: 100%;就行. ...
- 微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
- 浏览器占满整个屏幕_如何实现div布满整个浏览器,全屏
响应式网站建设 今天一个流行的设计处理的网站是为了填补宽度和浏览器窗口的一个大的图像和/或消息主页上的高度.在网站的响应在布局的改变基于用户的设备和屏幕尺寸,如果他们要包括可用于这些各种屏幕空间这些屏 ...
- 多个div占满整个屏幕(或页面)(待补充及理解)
<div id="app" class="outer"><h3 class="head">Head组件</h3 ...
最新文章
- TCP网络那点破事!三次握手、四次挥手、TIME-WAIT、HTTP 2.0 ....
- 机器学习数据清洗之异常数据处理、标准差法、MAD法、箱图法、图像对比法、异常值处理准则
- 【洛谷】【动态规划/二维背包】P1855 榨取kkksc03
- fckeditor配置
- 沉痛哀悼在汶川特大地震中的遇难者!!!!!
- AI开发者十问:10分钟了解AI开发的基本过程
- 在实验室服务器毫无阻拦的安装pip3
- 将 azw3 格式转换为 epub和mobi 格式
- ffmpeg + ios 移植ffmpeg 到ios 平台上
- 祝贺软件工程成了国家一级学科
- 扫码枪 android EditText
- hdu 5025 Saving Tang Monk(bfs+状态压缩)
- CASH软件分析差异性可变剪接
- MATLAB 染色细胞分割计数
- 通信原理及系统系列4—— AWGN信道(信噪比SNR、Es/N0和Eb/N0概念的辨析、转换及使用)
- 分布式事务系列一:BASE,一种ACID的替代方案(eBay分布式事务解决方案)
- 解决excel数据透析表计算类型没有非重复计数选项
- 面对CUDA报错的种种解决办法
- 如何判断机器具有智能?
- Dota2锁区steam下载国际服办法