«Положение: липкий» не работает, когда определяется «высота» ⇐ Html

[Anonymous]

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

после удаления значения emeper
emoving
emoving
. Stick:

ниже соответствующий код:

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

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;
}< /code>



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

Я прочитал, что использование свойства переполнения может быть проблематичным, хотя его нет, и я ничего не слышал о росте для других. Я могу ошибаться, конечно. Свойство от #main сохраняет #footernav липкий.

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