Mozilla bei height=100%

bollibopsel · 12. August 2007

Hallo,
Ich habe mit

#container {height:100%; background-color: #CCCCCC; width:167px;}

meine Internetseite auf die gesamte Fensterhöhe aufgezogen. Das funktioniert aber im Mozilla nur so lange, bis der Inhalt länger als mein Browserfenster ist.
Also:
Im Mozilla passt sich der graue Div-Bereich der Fensterhöhe des Browsers an.
Ist der text länger als das Browserfenster geht dieser über den definierten grauen Bereich hinaus.

Im IE passt sich der Div-Bereich der Länge des Textes an wenn dieser über das Browserfenster hinaus geht.
Wie kann ich auch Mozilla dazu bringen, das der container sich dem längeren Text anpasst und bei kürzeren Texten auf height:100% bleibt?

Vielen Dank im voraus
Frank

Maik · 12. August 2007

Hi,

für die Box muss eine Mindesthöhe eingerichtet werden:

Code:

#container {
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-color: #CCCCCC;
width:167px;
}

bollibopsel · 12. August 2007

Hallo,
danke für die Antwort. Mein Problem geht aber noch weiter.
Das Ganze soll jetzt auch für ein zweispaltiges Layout funktionieren. Also, im IE und im Mozilla soll posContent und posNavLeft immer eine Höhe von 100% haben. Wenn der Inhalt länger ist, soll posContent in beiden Browsern mitskalieren.
Weiteres Problem dabei ist, dass posNavLeft im Mozilla nicht mitskaliert, wenn posContent größer als das Browserfenster ist.

Hier der Code bei dem, als ich ihn auf das wesenliche reduzieren wollte, auch im IE Probleme aufgetaucht sind (vielleicht trotzdem nützlich):

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
* {
  margin:0;
  padding:0;
}

html,body {
  height:100%;
}

#container
{	width:850px;
    height:100%;	
}
#posNavLeft
{	width:150px;			
	background-color:#00FFFF;
    min-height:100%;
    height:auto !important;
    height:100%;
    float: left;
	}
#posContent
{	width:700px;    		
	float: left;
	background:#00FF00;	
	position:relative;
    min-height:100%;
    height:auto !important;
    height:100%;
}
-->
</style>
</head>
<body>
<div align="center">      
  <div id="container"> 
<div id="posNavLeft"> ###NAVHIER### </div>      
    <div id="posContent"> 
      <p>Inhalt</p>
      <!-- Ab hier wird der Inhalt zunächst auskommentiert -->
      <!-- <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
	<p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>
    <p>Inhalt</p>-->
    </div>
  </div>
</div>
</body>
</html>

Maik · 12. August 2007

Bei einem mehrspaltigen Layout, dessen Spaltenhöhen sich automatisch angleichen sollen, empfiehlt sich die "Fauxcolumns-Technik".

Hierbei erzeugt ein Hintergrundbild, das im Elternelement (hier: #container) eingesetzt und vertikal wiederholt wird, den Spaltenhintergrund:

Code:

html,body {
  height: 100%;
}

#container {
  width: 850px;
  margin: 0 auto;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background: #00FF00 url(leftCol.png) repeat-y; /* sorgt für den zweispaltigen Hintergrund */
}

#posNavLeft {
  width: 150px;
  float: left;
}

#posContent {
  margin-left: 150px;
}

Das Beispiel incl. der Grafik häng ich hier als ZIP-Datei an.

Mein CSS-Tutorial CSS-Layout mit 100%-Höhe hält da weitere Ausbaustufen für ein dreispaltiges Layout bereit, die sich auch auf einen "Zweispalter" anwenden lassen.

Mozilla bei height=100%

bollibopsel

Mitglied

Maik

bollibopsel

Mitglied

Maik

Anhänge

Neue Beiträge