DIV-Container mit variabler Höhe
Hallo!
Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht werden, dass #container die restliche Höhe vom Fenster annimmt.
Wenn #container zu wenig Inhalt hat, habe ich das Problem, dass der Footer zu weit oben steht. Wenn ich bei #container {min-height: 100%;} reinschreibe, wird der Bereich zu groß. Ich bräuchte so was wie #container {height: Resthöhe;}.
Danke im Voraus!
Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht werden, dass #container die restliche Höhe vom Fenster annimmt.
<!DOCTYPE html>
<html lang="de">
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
background-color: blue;
}
#header {
background-color: red;
height: 200px;
}
#container {
background-color: green;
}
#footer {
background-color: yellow;
height: 100px;
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="container">
container
</div>
<div id="footer">
footer
</div>
</body>
</html>
Wenn #container zu wenig Inhalt hat, habe ich das Problem, dass der Footer zu weit oben steht. Wenn ich bei #container {min-height: 100%;} reinschreibe, wird der Bereich zu groß. Ich bräuchte so was wie #container {height: Resthöhe;}.
Danke im Voraus!
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 304688
Url: https://administrator.de/contentid/304688
Ausgedruckt am: 08.11.2024 um 21:11 Uhr
4 Kommentare
Neuester Kommentar
Hallo dimaqw,
hier mal eine mögliche Variante mit CSS3 und calc()
https://jsfiddle.net/h1kabqj3/
Wenn der Footer stattdessen am unteren Rand immer fest stehen soll ,also immer sichtbar sein soll auch wenn der Haupt-Content länger ist, musst du den Footer als position:fixed und bottom:0px definieren.
https://jsfiddle.net/bt7dLaec/1/
Ansonsten ein sehr bekanntes Framework für solche Sachen ist Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grüße Uwe
hier mal eine mögliche Variante mit CSS3 und calc()
https://jsfiddle.net/h1kabqj3/
Wenn der Footer stattdessen am unteren Rand immer fest stehen soll ,also immer sichtbar sein soll auch wenn der Haupt-Content länger ist, musst du den Footer als position:fixed und bottom:0px definieren.
https://jsfiddle.net/bt7dLaec/1/
Ansonsten ein sehr bekanntes Framework für solche Sachen ist Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grüße Uwe