Grüß euch!
Ich bekomm die Krise! Es will einfach nicht funktionieren! Es geht darum: Die Seite besteht aus mehreren DIVs. Diese DIVs sollen, bei wenig Inhalt (sprich: es gibt keine Scrollbalken, der Content hat auch so Platz auf der Seite) 100% der Browserhöhe einnehmen. Wird der Inhalt jedoch länger und somit "größer" in Bezug auf die vertikale Ausdehnung gemessen in Pixel, so soll sich das DIV vergrößern und ebenfalls bis zum unteren Browserrand reichen. Ja klar, ein DIV wächst immer mit dem Inhalt, is schon klar. Aber die Struktur der Seite erfordert leider, dass mehrere DIVs ineinander verschachtelt sind.
Der Aufbau der Seite war schon einmal komplizierter und beinhaltete 14 DIVs. Nun hab ich es, soweit wie möglich, reduziert auf die Gefahr hin, dass ich größere Hintergrundbilder benutzen muss um den Look der komplizierten Seite mit mehren DIVs hinzubekommen. Gut, darum solls hier aber auch gar nicht gehen. Ich poste jetzt einfach mal den HTML und CSS Code:
*****CSS******
@charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background: url(img/grass.jpg);
}
div.topContainer {
height: 100px;
width:100%;
background:#063;
}
div.topLine {
height: 100%;
width: 100%;
float: left;
margin-left: -150px;
text-indent: 150px;
}
div.cornerCircle {
float:right;
width: 150px;
background: #FF0000;
height: 100%;
}
div.mainContainer {
float:left;
height: auto;
min-height: 100%;
background: #FFF;
width: 100%;
}
div.menuContent {
/*float:left;*/
height: 100%;
width: 880px;
margin: 0 auto 0 auto;
background: #333;
text-align:center;
}
div.rightLine {
float:right;
height: auto;
min-height: 100%;
background:#00F;
width: 150px;
}
*******HTML********
<body>
<!--<div class="wrap">-->
<div class="topContainer">
<div class="topLine">topLine</div>
<div class="cornerCircle">cornerCircle</div>
</div>
<div class="mainContainer">
<div class="menuContent">Menü und Content<br /><br />
</div>
</div>
</body>
Dieser Code bewirkt, dass alles perfekt dargestellt wird wenn maßig Content vorhanden ist, der über die (anfangs sichtbare) Seite "hinausgeht". Wenn aber wenig Content vorhanden ist, der nur wenige Zeilen lang ist, dann ist auch das entsprechende DIV "menuContent" nur ein paar Pixel hoch.
Also, um nun zur Frage zu kommen: Gibt es einen vernünftigen Weg um die Eigenschaften "height:auto", "height:100%" und "min-height:100%" zu verknüpfen, ohne das eine die andere ausschließt?
Würd ich das DIV mit dem Content nämlich auch "height: 100%" setzen, so würde es bei längerem Content einfach abgeschnitten werden (also das DIV an sich, nicht der Text der sich darin befindet). Wähle ich den Weg "height: auto" in Kombination mit "min-height: 100%" so wie in meinem obigen Code, so wird die min-height anscheinend völlig ignoriert!
Weiß jemand Rat?
PS: Puh war der Beitrag lang....
