CSS 如何让 height:100%; 起作用

转载 2016年09月18日 14:25:22

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

按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个div的高度设定为height: 50%;,而它的父元素的高度是100px,那么,这个div的高度应该是50px。

那为什么 height:100%; 不起作用

当设计一个页面时,你在里面放置了一个div元素,你希望它占满整个窗口高度,最自然的做法,你会给这个div添加height: 100%;的css属性。然而,如果你要是设置宽度为width: 100%;,那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗?

错。

为了理解为什么不会,你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。

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

因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。


上面的演示例子是父元素没有设定固定高度,于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%

那么,如果想让一个元素的百分比高度height: 100%;起作用,你需要给这个元素的所有父元素的高度设定一个有效值。换句话说,你需要这样做:

<html>
  <body>
    <div style="height: 100%;">
      <p>
        想让这个div高度为 100% 。
      </p>
    </div>
  </body>
</html>

现在你给了这个div的高度为100%,它有两个父元素<body><html>。为了让你的div的百分比高度能起作用,你必须设定<body><html>的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

从这个演示中你可以看出,height: 100%;起作用了。

在使用height: 100%;时需要注意的一些事项

1、Margins 和 padding 会让你的页面出现滚动条,也许这是你不希望的。

2、如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。

让高度百分比,height:100% 生效的3种方法

核心原理; height:100%这个概念是子节点相对于父容器而言;所以要让此属性生效,必要的一点就是:父容器必须具有具体的高度信息; 直接在的子节点(如div中)写height:100%是不会生效的...
  • huitoukest
  • huitoukest
  • 2016年05月12日 09:04
  • 9249

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

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

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从...
  • haluoluo211
  • haluoluo211
  • 2016年05月08日 16:37
  • 8023

css如何用height:100%设置全屏

在符合标准的 XHTML 模式下,将 DIV 的高度简单的设置为 100% 往往并不能达到想要的效果,原因是“百分比”是个相对于父节点的值,如果你没有设置他们的父节点的高度,那么设置 DIV 的高度为...
  • poplau
  • poplau
  • 2008年04月23日 13:25
  • 4580

css 中 height:100% 和 height:inherit 异同

height:100%和height:inherit的异同 1. 兼容性差异 height:100% IE6+ √ height:inherit IE8+ √ 2. 大多数情况...
  • u011784135
  • u011784135
  • 2016年01月25日 11:57
  • 281

解决html设置height:100%无效的问题

通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 你只需要在css处添加上html, b...
  • suweierxing
  • suweierxing
  • 2015年11月30日 14:09
  • 6162

DIV的CSS height:100%无效的解决办法

在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上“style:"height:100%;"”是无效的。 那么如何才能让di...
  • xbczy
  • xbczy
  • 2014年06月23日 16:17
  • 1256

微信小程序css篇----尺寸(Dimension)

下班回来了继续看,尺寸:dimension; 一.尺寸属性:允许控制元素的宽和高,还可以设置行间距。 1.height:设置元素的高度。 2.line-height:设置hang gao...
  • qq_32067045
  • qq_32067045
  • 2016年12月29日 22:22
  • 1443

vue中设置height:100%无效

在写vue应用时,想让根节点满屏,设置height: 100%无效。 id="app"> 我是根节点 #app { width: 100%; height: 10...
  • hahaheyliu
  • hahaheyliu
  • 2017年06月14日 10:30
  • 3814

div的高度用百分比 如何占满浏览器

div的高度用百分比  如何占满浏览器 不是不能用百分比,在用百分比的时候,一定要确定父亲节点的高度(宽度是同样的道理); 比如: > 如果给div2设置height:100%;,那么...
  • xuchuangqi
  • xuchuangqi
  • 2016年09月19日 23:10
  • 890
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 如何让 height:100%; 起作用
举报原因:
原因补充:

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