Ich habe eine Seite mit Kopf-, Inhalts- und Fußzeile. Die Kopf- und Fußzeile haben eine feste Höhe, und ich möchte, dass der Inhalt seine Höhe so anpasst, dass er dynamisch zwischen Kopf- und Fußzeile passt. Ich plane, ein Hintergrundbild in meinen Inhalt einzufügen, daher ist es wichtig, dass es tatsächlich den Rest des nicht belegten vertikalen Raums ausfüllt.

Ich habe das benutztSticky Footer Vorgehensweise, um sicherzustellen, dass die Fußzeile am unteren Rand der Seite bleibt. Dadurch erstreckt sich der Inhalt jedoch nicht über die gesamte Höhe des verbleibenden Speicherplatzes.

Ich habe verschiedene Lösungen ausprobiert, bei denen ich etwas hinzugefügt habeheight:100%, height:auto; position:relative aber es hat nicht funktioniert.

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