文档章节

CSS中height 100%高度无效的原理解析

开源中国最牛的人
 开源中国最牛的人
发布于 2018/12/02 10:43
字数 253
阅读 107
收藏 0

我们在body中定义一个div设置 width:100%;height:100%;background-color: #666666;用F12查看,发现div并没有铺满全屏,那么我们来解析下原因:

在css中因为父元素没高度,父元素的父元素也没高度,所以div也就没有高度,简单来说,块级元素的基本尺寸都是从父类元素继承过来的

div的父元素是body,我们查看body元素高度,发现也是0,那是因为body的父元素html没有高度,如果想要div,那么父元素body必须有高度,那么html必须设置高度:

            html,body{
				height: 100%;
			}
			.app{
				width: 100%;
				height: 100%;
				background-color: #666666;
			}

 

© 著作权归作者所有

开源中国最牛的人
粉丝 1
博文 91
码字总数 25792
作品 0
西安
高级程序员
私信 提问
position:relative和absolute以及css height

position属性 <无论怎样设置 始终文字框都无法紧贴浏览器边框……剩下的缝隙简直诱发强迫症 body { overflow: hidden;} .container{position:relative; z-index:998; padding:2rem;top: 0px...

phala
2015/07/31
36
0
CSS实现footer“吸底”效果

我们经常会遇到这样的问题:如何用css来实现底部元素可“粘住底部”的效果,对于“粘住底部”,本文有两种理解: 一是无论内容的多少,我们都希望使按钮,固定于可视窗口的底部,且内容区是可...

Sunflower127
2018/10/10
0
0
初始化页面body为空的问题。

设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我...

marjey
2016/12/15
11
0
最近总结的11条兼容浏览器问题

1 padding-top 高度计算方式不同 IE不加高度,Firefox等加高度 解决方案: height:345px; //此行为firefox可识别高度。 *height:427px //为IE可识别高度。 2 Div text-align:center 在firef...

湖小叶叶
2014/03/07
181
0
Web前段开发人员须知的常见浏览器兼容性问题及解决技巧

为什么会有兼容性问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主...

WinkJie
06/05
16
2

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 年迈渔夫遭黑帮袭抢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享Elvis Presley的单曲《White Christmas》: 《White Christmas》- Elvis Presley 手机党少年们想听歌,请使劲...

小小编辑
12分钟前
17
3
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部