Блог

Главная - Вопросы по программированию - Почему высота не работает в CSS, когда я использую проценты?

Почему высота не работает в CSS, когда я использую проценты?

#css

#css

Вопрос:

Итак, я пытаюсь установить изображение равным 100% высоты и ширины html-элемента (на самом деле я использую окно браузера). У меня установлен CSS как 

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

И ширина ведет себя правильно, но высота не меняется. Я попытался установить для него значение height: 2%, и оно осталось на той же высоте. Я не хочу использовать px для установки высоты, потому что я хочу, чтобы это работало на мобильных устройствах, но ВЫСОТА, у вас НЕ РАБОТАЕТ?

Ответ №1:

Вам также нужно установить height: 100% вкл body .

Следуя вашему точному примеру, вы могли бы сделать:

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

Однако, похоже, вы, возможно, пытаетесь получить полноэкранное фоновое изображение (потому что вы использовали z-index — кстати, z-index не использует % , просто простое число).

В этом случае вам следует вместо этого использовать один из приведенных здесь методов:

http://css-tricks.com/perfect-full-page-background-image/

Комментарии:

1. Если он пытается создать фоновое изображение, почему бы просто не использовать body{background:url('image.png'); background-attachment:fixed;} ?

2. @B1KMusic: Прошло некоторое время с тех пор, как я ответил на этот вопрос, но, похоже, OP хотел, чтобы размер фона соответствовал размеру окна. Прочитайте маркированные пункты в ссылке, которую я опубликовал, вам нужен более сложный CSS, чем ваше предложение, чтобы достичь большинства из этих пунктов.

3. Я не знаю, кажется немного посторонним, когда вы могли бы выбрать более простое решение. Кхм, вот так . Если только я чего-то не упускаю

Ответ №2:

Это потому, что элемент image не является прямым дочерним элементом элемента html. Вы также должны указать высоту для элемента body и любого другого элемента, содержащего элемент image.