Mam stronę z nagłówkiem, treścią i stopką. Nagłówek i stopka mają stałą wysokość i chciałbym, aby treść dostosowała swoją wysokość, tak aby pasowała dynamicznie między nagłówkiem i stopką. Zamierzam umieścić obraz tła w mojej treści, dlatego bardzo ważne jest, aby rzeczywiście wypełniał resztę niezajętej przestrzeni pionowej.

UżyłemLepka stopka podejście, aby upewnić się, że stopka pozostanie na dole strony. To jednak nie powoduje, że zawartość obejmuje całą wysokość pozostałej przestrzeni.

Próbowałem kilku rozwiązań, które wymagały dodaniaheight:100%, height:auto; position:relative ale to nie zadziałało.

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