Estou criando uma página de destino em que o usuário vê pela primeira vez uma área principal com um rodapé embaixo dela. Rolar mais para baixo revela que o rodapé é um cabeçalho fixo e pretendo usar CSS puro para isso. Para obter a aparência em tela cheia do conteúdo principal e do rodapé, defino oheight propriedade a dois valores diferentes: 92% e 8% (usandovh também não funciona). Não importa oheight Eu especifico no meu CSS (unidades diferentes e tudo), meu rodapédiv não está furando. Assim que eu remover oheight propriedade funciona como pretendido.

Aqui está uma captura de tela da minha páginaantes removendo oheight propriedades:

Como você pode ver, ele faznão bastão:

Após remover oheight valores de propriedade,faz bastão:

Aqui está o meu HTML:

<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
...

Este é o meu (possivelmente) CSS relevante:

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

Eu li que usando ooverflow a propriedade pode ser problemática, embora não esteja presente nem ouvi nada sobreheight sendo um problema para os outros. Eu posso estar errado, é claro.

Eu testei em:

Firefox 61 (noturno)Safari 53 (versão técnica)Chrome 65

EDITAR: Grande desenvolvimento; removendo oheight propriedade de#main mantém#footerNav pegajoso.