it-swarm.com.de

Div bis zum Ende der Seite erweitern (nur HTML und CSS)

Es ist ein sehr einfaches Problem, aber ich kann online keine passende Lösung finden. Ich möchte eine Liste von Elementen im natürlichen Fluss haben, wobei das letzte Element bis zum Ende der Seite reicht. Also, wenn ich habe

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>

Ich benötige das Element bottom, um vom unteren Rand von top zum unteren Rand der Seite zu gelangen. Jede Lösung, die nur HTML und CSS verwendet, ist willkommen. Sie können auch Container-Divs oder andere Elemente hinzufügen, sofern die dynamische Größenänderung des Divs bottom möglich ist

BEARBEITEN: Ich möchte keine Werte für bottom fest codieren, da ich möchte, dass bottom angepasst wird, wenn die Größe von top geändert wird

hier ist eine Fiedel für alle Ihre Bedürfnisse Geigenspiel: http://jsfiddle.net/8QnLA/

27
woojoo666

Lösung: # 1: CSS-Tabellen:

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 (wenig Inhalt)

Codepen # 2 (viel Inhalt)

Lösung 2: Verwenden von Calc- und Viewport-Einheiten

#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}
body {
  margin: 0;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

Where `min-height: calc(100vh - 50px);` means:

'Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.'
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 (wenig Inhalt)

Codepen # 2 (viel Inhalt)

Lösung 3 - Flexbox

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}
body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 - wenig Inhalt

Codepen # 2 - viel Inhalt

52
Danield

Stellen Sie die Höhe von html, body bis 100%. Dann können Sie den letzten <div> 's Höhe zu 100% und es wird so hoch sein wie das Fenster. Da Sie wahrscheinlich nicht scrollen möchten, können Sie overflow: hidden auf der html, body auch.

http://jsfiddle.net/GKbzx/

3
Explosion Pills