«позиция: липкая» не работает, когда определена «высота» ⇐ CSS

[Anonymous]

Я создаю целевую страницу, на которой пользователь сначала видит основную область с нижним колонтитулом под ней. Прокрутив дальше вниз, вы увидите, что нижний колонтитул представляет собой липкий заголовок, и для этого я стремлюсь использовать чистый CSS. Чтобы получить полноэкранный вид основного содержимого и нижнего колонтитула, я установил для свойства height два разных значения: 92% и 8% (использование vh также не работает). Независимо от высоты, которую я указываю в своем CSS (разные единицы измерения и все такое), мой div нижнего колонтитула не прилипает. Как только я удаляю свойство высоты, оно работает как задумано.
Вот снимок экрана моей страницы до удаления высоты свойства:


Как видите, оно не приживается:


После удаления высоты< /code> значения свойства, оно придерживается:
[img]https://i.sstatic.net /QeSD5.png[/img]

Под соответствующим кодом:

Код: Выделить всё

html,
body {
height: 100%;
margin: 0;
}

#main {
height: 92%;
}

#landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}

#landingContent {
width: 20vw;
}

#footerNav {
height: 8%;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
}

Код: Выделить всё

Logo
Lorem ipsum, paragraph content, etc etc.
Button





Logo


Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello

Я читал, что использование свойства overflow может быть проблематичным , хотя его нет, и я ничего не слышал о том, что высота является проблемой для других. Конечно, я могу ошибаться.
Я проверял на:

• Firefox 61 (Nightly)
  Safari 53 (техническая предварительная версия)
• Chrome 65

Примечание: удаление Свойство height из #main сохраняет #footerNav липкий.

Подробнее здесь: https://stackoverflow.com/questions/498 ... is-defined