设置样式“height: 100%”

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

data_repo

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

阅读量955

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/data_repo/article/details/51840433

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

设置样式“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>