当我使用百分比时，为什么高度在CSS中不起作用？

问题描述

| 因此，我试图将图像设置为html元素的高度和宽度的100％（实际上，浏览器窗口正是我要使用的）。我将CSS设置为

html{
  width:  100%;
  height: 100%;
}
img{
  width:   100%;
  height:  100%;
  z-index: 0%;
}

宽度行为正确，但高度不变。我尝试将其设置为高度：2％，并且保持相同的高度。我不想使用px来设置高度，因为我希望它可以在移动设备上使用，但是，高，行不通？     

解决方法

        您还需要在

body

上设置

height: 100%

。 结合您的确切示例，您可以执行以下操作：

html,body,img {
    width: 100%;
    height: 100%;
}

但是，您似乎正在尝试获取全屏背景图片（因为您使用了

z-index

-顺便说一句

z-index

不使用

%

，只是一个普通数字）。 在这种情况下，您应该改用以下方法之一： http://css-tricks.com/perfect-full-page-background-image/     ,        那是因为image元素不是html元素的直接子元素。您还必须指定body元素和其他包含image元素的元素的高度。