Eu tenho uma página que tem um cabeçalho, conteúdo e rodapé. O cabeçalho e o rodapé são de altura fixa e eu gostaria que o conteúdo ajustasse sua altura para que ele se ajustasse dinamicamente entre o cabeçalho e o rodapé. Estou planejando colocar uma imagem de fundo no meu conteúdo, por isso é fundamental que ela realmente preencha o restante do espaço vertical desocupado.

Eu usei oRodapé pegajoso abordagem para garantir que o rodapé permaneça na parte inferior da página. No entanto, isso não faz com que o conteúdo abranja toda a altura do espaço restante.

Eu tentei várias soluções que me envolveram adicionandoheight:100%, height:auto; position:relative mas não funcionou.

<code>html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: 100%;
  margin: 0 0 -30px 100px;
  padding: 25px 30px 25px 30px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}</code>

<code><div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer></code>