设置样式“height: 100%”

最新推荐文章于 2023-12-14 15:29:58 发布

原创最新推荐文章于 2023-12-14 15:29:58 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

2 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文解释了CSS中百分比高度的实现原理及常见问题。详细介绍了如何通过设置父级元素的高度来确保子元素能够正确使用百分比高度。

设置样式“height: 100%”

1、问题描述

当你设置一个页面元素的高度height为100%时，期望这样元素能撑满整个浏览器窗口的高度；或者，当你用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。但大多数情况下，这样的做法没有任何效果。

2、工作原理

宽度：Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度，也就是自动设置宽度缺省值为100%。当然，给元素设置宽度为“width: 100%;”，那这个元素的宽度会立刻扩展到其父元素容器的整个横向宽度。

高度：浏览器默认元素的高度为：height: auto，也就是根据其内容计算元素的实际高度。当内容超出了视窗范围，会自动出现滚动条。可以元素设置一个绝对高度，即用px、cm等单位给元素定义高度。可以给元素设置一个百分比高度，百分比的高度在设定时需要根据这个元素的父元素容器的高度。例如：如果把一个div的高度设定为height: 50%，而它的父元素的高度是100px，那么这个div的高度应该是50px。

3、问题原因

因为元素没有具体的默认高度值，所以设置一个元素的高度设定为百分比高度时，无法获取父元素的高度，也就无法计算自己的高度。也就是说，父元素的高度只是一个缺省值：height: auto。浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，也就是一个null值，而浏览器不会对这个值有任何的反应。

4、解决办法

设置元素高度 ：如果想让一个元素的百分比高度“height:100%”起作用，需要给这个元素的所有父元素的高度设定一个有效值。代码参考如下：

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        该div的高度为100%
      </p>
    </div>
  </body>
</html>

或者可以：

<html>
  <body style="width: 100%; height: 100%;">
    <div style="width: 100%; height: 100%;">
      <p>
        该div的高度为100%
      </p>
    </div>
  </body>
</html>