简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  CSS 如何操作height:100%;使其发挥作用

CSS 如何操作height:100%;使其发挥作用

巴扎黑
巴扎黑asal
2017-06-28 10:02:101563semak imbas

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

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

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

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

当设计一个页面时，你在里面放置了一个p元素，你希望它占满整个窗口高度，最自然的做法，你会给这个p添加height: 100%;的css属性。然而，如果你要是设置宽度为<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？

错。

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

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

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


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

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

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

现在你给了这个p的高度为100%，它有两个父元素6c04bd5ca3fcae76e30b72ad730ca86d和100db36a723c770d327fc0aef2ce13b1。为了让你的p的百分比高度能起作用，你必须设定6c04bd5ca3fcae76e30b72ad730ca86d和100db36a723c770d327fc0aef2ce13b1的高度。

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


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

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

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

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

Atas ialah kandungan terperinci CSS 如何操作height:100%;使其发挥作用 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中height和line-height区别Artikel seterusnya：CSS中height和min-height的区别详解

Artikel berkaitan

Lihat lagi