Tengo una página que tiene un encabezado, contenido y pie de página. El encabezado y el pie de página tienen una altura fija, y me gustaría que el contenido ajustara su altura para que se ajuste dinámicamente entre el encabezado y el pie de página. Estoy planeando poner una imagen de fondo en mi contenido, por lo que es fundamental que en realidad llene el resto del espacio vertical desocupado.

Usé elPie de página pegajoso enfoque para asegurarse de que el pie de página permanece en la parte inferior de la página. Sin embargo, esto no hace que el contenido abarque toda la altura del espacio restante.

He intentado varias soluciones que me implicaron añadiendoheight:100%, height:auto; position:relative Pero no funcionó.

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