前端小知识:为什么你写的 height:100% 不起作用?

作者:JiaXinYi

https://segmentfault.com/a/1190000012707337

这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制?

1.百分比宽高的设定

按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的:

http://www.w3school.com.cn/cssref/prdimwidth.asp

http://www.w3school.com.cn/cssref/prdimheight.asp

2.width:100%;

我们写下这样一段代码,随意设置一个背景色便于观察元素

可以看到基本上宽的100%很容易就实现的,但是这里的height却不能设置成%比的(该元素会消失看不见),这是为什么呢?

3.浏览器是如何计算高度和宽度的

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度,如下:

但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。

即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。

各个浏览器对于宽高的解析也不相同,大家可以自己搜索一下。

参考:http://www.webhek.com/post/css-100-percent-height.html

4.如何解决

现在你知道了吧,%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height;

要特别注意的一点是,在之中的元素的父元素并不仅仅只是,还包括了。

所以我们要同时设置这两者的height,只设置其中一个是不行的:

5.关于line-height居中的一点误解?

全部代码如上,可以看到设置了line-height为100%没有居中,这是为什么呢,因为这时候的%是相对于字体尺寸的?所以直接作用于没有绝对高度的元素是不行的。

line-height属性说明:http://www.w3school.com.cn/cssref/prdimline-height.asp

这时候要想居中,可以如下,做一个div嵌套,一个负责高度,一个负责居中,虽然感觉并不会这样用到,但是居中还是很灵验的~

6.源码

https://github.com/JiaXinYi/ife-study/blob/master/height/height.html

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

本文来自企鹅号 - 前端大全媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

【汇总】flash单个文件上传

之前有朋友给我发送email,询问我是否有单个文件上传的源代码,因为当时写这个好像是在09年,所以放哪了一时也没找着。后来整理硬盘的时候,找到了源码,所以决定...

13720
来自专栏magicodes

SharePoint如何配置Ipad跳转等问题

Apple iPad 设备上不支持 SharePoint 标准视图。用户可以改用移动视图在 iPad 设备上查看 SharePoint 内容。默认情况下,iPa...

17760
来自专栏烙馅饼喽的技术分享

用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 热更新Live2D

总得来说,我们可以先去live2D官网下载它的Unity SDK,然后即可在Unity中使用。我们这里使用的是live2d 2.1版。

18230
来自专栏黑泽君的专栏

Dash:程序员的的好帮手

  作为一名死coder,每天最常见的动作就是查看各种API文档,你一定也有过同时打开N个窗口(HTML、PDF、CHM),不停的在编辑器与文档之间切换的感受吧...

20420
来自专栏nimomeng的自我进阶

PureMVC--一款多平台MVC框架

了解设计模式的人应该都多少听说过MVC模式。 严格意义上来说,“MVC模式”是一个伪概念,因为MVC并不属于设计模式,至少不属于GoF的23种设计模式之一,而...

21930
来自专栏游戏杂谈

移动平台下的Socket几个问题

在页游时代,使用Flash ActionScript 3.0进行开发,as3提供比较简单和健全的socket API。到了手游时代,基于tcp的socket编程...

23540
来自专栏大宇笔记

GCD swift dispatch_set_target_queue 小例

let  Queue1  = DispatchQueue(label:"Queue1")

12740
来自专栏Python中文社区

网易云音乐歌曲评论爬虫(附源码)

用过网易云音乐听歌的朋友都知道,网易云音乐每首歌曲后面都有很多评论,热门歌曲的评论更是接近百万或者是超过百万条.现在我就来分享一下如何爬取网易云音乐歌曲的全部评...

51510
来自专栏程序员互动联盟

为什么C语言屹立不倒?

近年来,谷歌一直致力于开发出自己的编程语言以取代当今世上最常用的C、C++和JavaScript。在系统语言方向,谷歌的Go语言能够为用户在数据中心内建立大型软...

428130
来自专栏佳爷的后花媛

前端面试题整理

两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块<aside>域浮动,<aside>浮动后覆盖绿色<main>, 再将<main> overflow:au...

55820

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励