Процент верхнего края не изменяется при уменьшении высоты окна

Я работаю над проектом, в котором клиент хочет, чтобы навигация <div> выровнялась в соответствии с высотой экрана, подобно тому, как margin-left в процентах работает при уменьшении ширины экрана.

Итак, я дал margin-top: 20%, а навигация <div> отображает это поле, но когда я уменьшаю высоту окна, он не корректируется в соответствии с высотой экрана, хотя он работает, когда я уменьшаю ширину экрана.

Мой вопрос не в том, как я могу достичь этого, но почему процент работает горизонтально, а не вертикально?

Вот пример: http://jsfiddle.net/sandeep/5VReY/

Ответ 1

Процент работает по ширине блока контейнера в соответствии со спецификациями css

Процент рассчитывается по ширине сгенерированный блок, содержащий блок. Обратите внимание, что это верно для "margin-top" и "margin-bottom".

Подробнее см. w3.org.

Ответ 2

Вы можете играть в свойствах верхнего и нижнего пределов ширины, имеющих преимущество по умолчанию в "авто";

Если у вас есть такой блок:

<div class="centered"></div>

Он может быть центрирован по вертикали следующим образом:

.centered {
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here the magic. */

    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}

То же самое можно сделать для горизонтального выравнивания ширины влево/вправо. Вы также можете иметь смещение, чтобы убрать другую точку, чем центр блока.

Здесь я оставляю вам несколько примеров того, что и как можно сделать, объединяя эти свойства. http://jsfiddle.net/SQDJ6/