Rodapé na parte inferior da página ou conteúdo, o que for inferior

Question 1

Tenho a seguinte estrutura:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Eu carrego conteúdo dinamicamente no <article>usando javascript. Por causa disso, a altura do <article>bloco pode mudar.

Quero que o <footer>bloco fique na parte inferior da página quando houver muito conteúdo, ou na parte inferior da janela do navegador quando houver apenas algumas linhas de conteúdo.

No momento, posso fazer um ou outro ... mas não ambos.

Então, alguém sabe como posso fazer isso - conseguir <footer>que se fixe na parte inferior da página / conteúdo ou na parte inferior da tela, dependendo de qual estiver abaixo.

Question 2

O rodapé pegajoso de Ryan Fait é muito bom, mas acho que sua estrutura básica está ausente *.

Versão Flexbox

Se você tiver a sorte de poder usar o flexbox sem precisar oferecer suporte a navegadores mais antigos, os rodapés fixos se tornam trivialmente fáceis e oferecem suporte a um rodapé de tamanho dinâmico.

O truque para fazer com que os rodapés fiquem fixos na parte inferior com o flexbox é ter outros elementos no mesmo contêiner flexíveis verticalmente. Tudo o que é necessário é um elemento wrapper de altura total com display: flexe pelo menos um irmão com um flexvalor maior que 0:

_CSS:

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

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

Exibir trecho de código

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expandir trecho

Se você não pode usar o flexbox, minha estrutura base de escolha é:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

O que não está tão longe de:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

O truque para fazer o rodapé aderir é ter o rodapé ancorado no preenchimento inferior do elemento que o contém. Isso requer que a altura do rodapé seja estática, mas descobri que os rodapés normalmente têm uma altura estática.

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Exibir trecho de código

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expandir trecho

Com o rodapé ancorado em #main-wrapper, agora você precisa #main-wrapperter pelo menos a altura da página, a menos que seus filhos sejam mais longos. Isso é feito criando #main-wrapperum min-heightde 100%. Você também deve lembrar que seus pais, htmle bodyprecisam ser tão altos quanto a página também.

_CSS:

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

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Exibir trecho de código

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

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expandir trecho

Claro, você deve estar questionando meu julgamento, já que este código está fazendo com que o rodapé caia da parte inferior da página, mesmo quando não há conteúdo. O último truque é mudar o modelo de caixa utilizado pelo #main-wrappermodo que o min-heightde 100%inclui o 100pxpreenchimento.

_CSS:

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

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Exibir trecho de código

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

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expandir trecho

E aí está, um rodapé com sua estrutura HTML original. Apenas certifique-se de que o footer's heighté igual a #main-wrapper' s padding-bottom, e você deve estar configurado.

^{* O motivo pelo qual encontro falhas na estrutura do Fait é porque ele define os elementos .footere .headerem diferentes níveis hierárquicos enquanto adiciona um .pushelemento desnecessário .}

Question 3

O rodapé autocolante de Ryan Fait é uma solução simples que usei várias vezes no passado.

HTML básico :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Traduzir isso para ser semelhante ao que você já tem resultados com algo neste sentido:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Só não se esqueça de atualizar o negativo na margem do wrapper para coincidir com a altura do seu rodapé e pressione div. Boa sorte!

Question 4

Eu estava tentando resolver esse problema sem adicionar nenhuma marcação adicional, então acabei usando a seguinte solução:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Expandir trecho

Você tem que saber as alturas do cabeçalho, do nav e do rodapé para poder definir a altura mínima do artigo. Com isso, se o artigo tiver apenas poucas linhas de conteúdo, o rodapé ficará na parte inferior da janela do navegador, caso contrário, ficará abaixo de todo o conteúdo.

Você pode encontrar essa e outras soluções postadas acima aqui: https://css-tricks.com/couple-takes-sticky-footer/