Ответ bobince даст вам знать, в каких случаях «высота: XX%;» будет работать или не будет работать.
Если вы хотите создать элемент с установленным отношением (высота:% от его собственной ширины), лучший способ сделать это - эффективно установить высоту с помощью padding-bottom
. Пример для квадрата:
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
Квадратный контейнер будет просто состоять из заполнения, и содержимое будет расширяться, чтобы заполнить контейнер. Длинная статья 2009 года на эту тему: http://alistapart.com/article/creating-intrinsic-ratios-for-video