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

转载 2018年01月06日 00:00:00

(点击上方公众号,可快速关注)

作者: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

640?wx_fmt=png&wxfrom=5&wx_lazy=1

2.width:100%;

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

  1. <body>

  2.    <div style="width:100%;height:100%;background-color:blueviolet;">

  3.    width:100%;height:100%;

  4.    </div>

  5. </body>

  6. //宽100%,我们现在看到的高是属于font-size的,而不是100%;


640?wx_fmt=png


  1. <body>

  2.    <div style="width:100%;height:200px;background-color:blueviolet;">

  3.    width:100%;height:200px;

  4.    </div>

  5. </body>

  6. //效果如下


0?wx_fmt=png

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

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

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

  1. <div style="height:100%;">height:100%;</div>  


0?wx_fmt=png

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

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

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

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

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

4.如何解决

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

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

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

  1.        html,body{

  2.            height: 100%;

  3.            margin: 0;

  4.            padding: 0;

  5.        }


0?wx_fmt=png

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

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7.    <title>Document</title>

  8.    <style>

  9.        html,body{

  10.            height: 100%;

  11.            margin: 0;

  12.            padding: 0;

  13.        }

  14.        div {

  15.            color: white;

  16.            text-align: center;

  17.            font-size: 30px;

  18.            line-height: 100%;

  19.            background-color: blueviolet;

  20.        }

  21.    </style>

  22. </head>

  23. <body>

  24.    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->

  25.    <div style="height:100%;">height:100%;</div>

  26.    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->

  27. </body>

  28. </html>

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

0?wx_fmt=png

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

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

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7.    <title>Document</title>

  8.    <style>

  9.        html,

  10.        body {

  11.            height: 100%;

  12.            margin: 0;

  13.            padding: 0;

  14.        }

  15.        .div1 {

  16.            background-color: blueviolet;

  17.            position: relative;

  18.        }

  19.        .div2 {

  20.            font-size: 30px;    

  21.            color: white;

  22.            text-align: center;                    

  23.            width: 400px;

  24.            position: absolute;

  25.            left: 50%;

  26.            top: 50%;

  27.            transform: translateX(-50%)  translateY(-50%);

  28.        }

  29.    </style>

  30. </head>

  31. <body>

  32.    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->

  33.    <div style="height:100%;" class="div1">

  34.        <div class="div2">height:100%;</div>

  35.    </div>

  36.    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->

  37. </body>

  38. </html>


640?wx_fmt=png

6.源码

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


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

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

640?wx_fmt=png

table布局 height=100%无效分析

table布局 height=100%无效分析 在使用table表格进行页面布局时,经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果,但在最新的浏览器中经常遇到无效,...
  • hshl1214
  • hshl1214
  • 2015年02月01日 12:28
  • 2139

div等元素height:100%高度为什么不生效

以前一直很郁闷一个问题,为什么设置height:100%不生效,尤其是设置body:height:100%不生效,后来就很少使用了这个了。今天在学习谷歌地图时关于height:100%看到了解答: ...
  • ann295258232
  • ann295258232
  • 2017年01月13日 14:40
  • 5326

关于height:100%无效的解决办法与细节

我们知道,对于块级元素浏览器总是默认使其宽度等于父容器宽度的100%不需要自己设定,但是对宽度的计算就并非这样了,当没有显式得定义容器的高度时,其高度由其包裹的内容决定,当显示得定义高度时,容器的高度...
  • SuperCoooooder
  • SuperCoooooder
  • 2016年09月08日 11:25
  • 3495

web中height:100%不起作用?

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?...
  • u012811805
  • u012811805
  • 2016年12月30日 09:08
  • 182

钱柜娱乐开户 Layout布局文件里的钱柜娱乐开户:layout_height等属性为什么会不起作用? (ViewGroup 重写注意点)

有的时候,我们配置好的布局文件,在加载完成添加到我们的Activity中后发现,并没有安装我们设置的属性 来布局,比为我们设置了钱柜娱乐开户:layout_marginTop="100dip",但...
  • abwbw
  • abwbw
  • 2014年10月15日 17:35
  • 408

layout_width,laiyout_height不起作用了

一:正常用法  正常加载布局就可以了
  • u014720313
  • u014720313
  • 2016年10月27日 16:16
  • 437

如何让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理,当...
  • u014041540
  • u014041540
  • 2015年08月24日 22:38
  • 219

如何让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理,当...
  • natalie86
  • natalie86
  • 2015年04月17日 09:26
  • 352

html5下让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年05月03日 16:23
  • 2242

钱柜娱乐开户 Layout的layout_height等属性为什么有时会不起作用?

有的时候,我们配置好的布局文件,在加载完成添加到我们的Activity中后发现,并没有安装我们设置的属性来布局,比为我们设置了钱柜娱乐开户:layout_marginTop=”100dip”,但是运...
  • fei0724
  • fei0724
  • 2015年01月06日 11:58
  • 2107
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端小知识:为什么你写的 height:100% 不起作用?
举报原因:
原因补充:

(最多只允许输入30个字)