JunkyXL: Inhalt auf mindestens ganzer Höhe

SELF-Forum

Inhalt auf mindestens ganzer Höhe

JunkyXL
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte dass meine Page immer mindestens die Fensterhöhe hat und nicht weniger.
Ich habe für den Header ein DIV mit 200px Höhe, einen Footer der unten am rand positioniert sein soll mit 100px Höhe.
Den Zwischenraum, dort wo der Hauptinhalt reinkommt, soll nun Fensterfüllend sein. Also so dass dass der Footer ganz unten ist und der Hauptinhalt gestreckt ist, selbst wenn nichts im Hauptinhalt drinsteht.

HTML:
<div class="Header"></div>
<div class="MainContent"></div>
<div class="Footer"></div>

CSS:
html, body
{
   height: 100%;
   width: 100%;
}

.Header
{
   width: 100%;
   height: 200px;
}

.MainContent
{
   width: 100%;
   height: 100% /* komplette Höhe füllen */
}

.Footer
{
   width: 100%;
   height: 100px;
}

Ich hoffe, es ist verständlich, was ich versuche zu erreichen.
Ich bekomme es so nicht hin, denn wenn ich den Hauptinhalt auf 100% strecke, geht der gesamte Inhalt über die Höhe _hinaus_, da ja Header und Footer bereits 300px einnehmen, ich würde aber gerne 100% vom rest benutzen. Bekomme das aber nicht hin. Hoffe, jemand weiß wie :)

Habe das ganze nochmal "aufgemalt": http://home.arcor.de/backfish/pics/divs.PNG

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Inhalt auf mindestens ganzer Höhe

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo JunkyXL

    ich möchte dass meine Page immer mindestens die Fensterhöhe hat und nicht weniger.
    Ich habe für den Header ein DIV mit 200px Höhe, einen Footer der unten am rand positioniert sein soll mit 100px Höhe.
    Den Zwischenraum, dort wo der Hauptinhalt reinkommt, soll nun Fensterfüllend sein. Also so dass dass der Footer ganz unten ist und der Hauptinhalt gestreckt ist, selbst wenn nichts im Hauptinhalt drinsteht.

    Ohne größere Trickserei bekommst du den Hauptinhalt nicht fensterfüllend, weil es keine Möglichkeit gibt 100% minus Headerhöhe minus Footerhöhe anzugeben.
    Du kannst aber dafür sorgen, dass body eine Mindesthöhe von 100% hat, und der Footer unten positioniert ist.

    HTML:
    <div class="Header"></div>
    <div class="MainContent"></div>
    <div class="Footer"></div>

    Diese Elemente sind wohl nur einmal auf der Seite vorhanden, da fände ich eine Identifizierung (id="") statt Klassifizierung (class="") passender.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
  <head>  
    <title>Seitentitel</title>  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
  </head>  
  <body>  
    <div id="Header"></div>  
    <div id="MainContent"></div>  
    <div id="Footer"></div>  
  </body>  
</html>

    Habe das ganze nochmal "aufgemalt": http://home.arcor.de/backfish/pics/divs.PNG

    Das dürfte mit folgendem CSS zu erreichen sein:

    html, body { /* die eventuellen Standardränder der Browser eliminieren */  
 margin:0;  
 padding:0;  
}  
html {  
 height:100%; /* nur html auf 100%, body soll ja _mindestens_ 100% bekommen */  
}  
body {  
 position:relative; /* damit sich position relative auf body und nicht auf den Viewport bezieht */  
 min-height:100%;   /* mindestens 100% Höhe */  
 border-left:1px solid red;  
 border-right:1px solid red;  /* nur die roten Border deines Beispiels */  
}  
* html body {  
 height:100%;  /* für IE<=6 die mit min-height nichts anfangen können, aber height so darstellen */  
}  
#Header {      /* ganz normal im Fluss */  
 height:200px;  
}  
#Header, #Footer {  /* nur für die roten Border deines Beispiels */  
 border-top:1px solid red;  
 border-bottom:1px solid red;  
}  
#MainContent {  
 padding-bottom:100px;  /* damit nicht ein Teil des Inhalts hinter #Footer verschwindet */  
}  
#Footer {  
 width:100%;         /* wird _nur_ hier benötigt, weil absolut positionierte Elemente sonst nur die Breite ihres Inhalts annehmen */  
 height:100px;  
 position:absolute;  /* absolut positioniert */  
 bottom:0;  
 left:0;             /* unten links in body */  
}

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln