CSS-Layout mit 100%-Höhe - CSS

Hallo Tutorianer!

Heute widme ich mich in diesem Tutorial einem CSS-Layout, das im Browserfenster zunächst eine Mindesthöhe von 100% einnimmt, die bei zunehmenden Inhalt mitwächst.

Basierend auf dem Layout-Modell aus meinem vergangenen CSS-Tutorial Zentriertes Layout mit drei Spalten wird nun in diesem Workshop das Layout im Viewport auf eine Mindesthöhe von 100% gestreckt.

Hierfür sind im bestehenden Stylesheet folgende CSS-Deklarationen zusätzlich erforderlich:

            
                    Code:
                  
                   	html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

Basis-Modell

1.1 HTML-Code:

            
                    Code:
                  
                   	<div id="wrapper" class="clearfix">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
</div>

1.2 CSS-Code:

            
            
              
                
                  
                    Code:
                  
                

                  
                   	* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}

/* DIV-Boxen */

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

div#leftCol {
width: 200px;
float: left;
}

div#rightCol {
width: 200px;
float: right;
}

div#centerCol {
margin: 0 200px;
}


/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
                  
                

              
            
          

Modell mit Header und Footer

2.1 HTML-Code:

            
                    Code:
                  
                   	<div id="wrapper" class="clearfix">
     <div id="header">header</div>
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
     <div id="footer">footer</div>
</div>

2.2 CSS-Code:

            
            
              
                
                  
                    Code:
                  
                

                  
                   	* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}

/* DIV-Boxen */

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

div#header {
height: 80px;
background: #fff;
border-bottom: 1px solid #b8b8b8;
}

div#leftCol {
width: 200px;
float: left;
}

div#rightCol {
width: 200px;
float: right;
}

div#centerCol {
margin: 0 200px;
}

div#leftCol, div#rightCol, div#centerCol {
padding-bottom: 25px;
}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 800px;
height: 20px;
background: #fff;
border-top: 1px solid #b8b8b8;
}


/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
                  
                

              
            
          

Die kompletten Beispiele (HTML-Code incl. Stylesheet und Grafik) mit zwei weiteren Varianten hänge ich hier als ZIP-Datei an.

mfg Maik

Nachtrag - 20.12.2008:

Nach Veröffentlichung dieses Tutorials im Sommer '07 wurde ich dieses Jahr im CSS-Forum schon einige Male darauf angesprochen, dass sich in den modernen Browsern (FF, Opera, Safari, usw.) plötzlich zwischen dem unteren Layout- und Fensterrand ein Abstand ergibt, sobald der Seiteninhalt die Höhe des Viewports (Anzeigebereich im Browserfenster) überschreitet, und die Seite nach unten gescrollt wird.

Kurz vor Ablauf der Jahresfrist find ich nach diversen Antworten im Board heute endlich Zeit, die Lösung auch hier vorzustellen

            
                    Code:
                  
                   	.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

Mit der Regelerweiterung font-size:0 wird die Schriftgröße für den dynamisch erzeugten Inhalt (content:".") auf null gesetzt, und somit die unerwünschte Lücke geschlossen.

Da in meinen Beispielseiten des ersten Attachments "3cols_height100%.zip" diese Formatierung fehlt, möchte ich Euch darauf hinweisen, sie in den Selektor .clearfix:after zu übernehmen, oder ab sofort die gefixte Version herunterzuladen - vielen Dank