# Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100%



## gunwald (22. Januar 2007)

Hallo da draußen!

Ich habe ein altes CSS Problem, für welches anscheinend die gesamte gebündelte Intelligenz des WWW keine Lösung weiß.
Es geht um folgendes: Ich habe eine Website mit dreispaltigem Layout, Kopf- und Fußzeile. 

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dreispaltiges Layout mit Kopf- und Fu&szlig;zeile</title>
<style type="text/css">
  body, html {
	height:100%;
	}
  body, p a {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
  }
  html>body h1 {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0em 1.1em 1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
		min-height:100%;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 0em 1em 16em;
    padding: 0 1em 0 1em;
    border: 1px dashed silver;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
</style>
</head>
<body>

<h1>CSS-basierte Layouts</h1>

<ul id="Navigation">
  <li><a href="../einfuehrung.htm">Einf&uuml;hrung in CSS-basierte Layouts</a></li>

  <li><a href="../mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
  <li><a href="../fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
  <li><a href="../navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
  <li><a href="../browserweichen.htm">CSS-Browserweichen</a></li>
</ul>

<div id="Info">
  <h2>Info-Box</h2>

  <p>Hatten Sie sich im letzten Beispiel gewundert,
     warum die &Uuml;berschrift dieser Box nicht als solche ausgezeichnet war?
     Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
     und erst in diesem die Haupt&uuml;berschrift notiert war,
     w&auml;re hier eine &Uuml;berschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
  <p>Im Quelltext dieses Beispiels ist nun zuerst die Seiten&uuml;berschrift notiert,
     wodurch auch dieses semantische Problem gel&ouml;st ist.</p>
</div>

<div id="Inhalt">
  <h2>3-spaltiges Layout mit Kopf- und Fu&szlig;zeile</h2>

  <p>Dieses Beispiel ist um eine Kopf- und Fu&szlig;zeile erweitert.</p>
  <p>Die Kopfzeile ist als Seiten&uuml;berschrift mit &lt;h1&gt; ausgezeichnet
     und kann genauso gut wie ein &lt;div&gt; &uuml;ber CSS formatiert
     - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
     Auch eine Grafik k&ouml;nnte in &lt;h1&gt; als Hintergrundbild definiert
     oder &uuml;ber &lt;img&gt; eingebunden werden.</p>

  <p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundger&uuml;st f&uuml;r die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Gr&ouml;&szlig;enangaben, Farben und R&auml;ndern
     und f&uuml;gen Sie z.B. individuelle grafische Elemente ein.</p>
</div>

<p id="Fusszeile">Diese Fu&szlig;zeile stellt &uuml;ber die CSS-Eigenschaft 'clear'
   den Elementenfluss wieder her.</p>

<p><a href="../mehrspaltige.htm#kopf_fuss">zur&uuml;ck</a></p>

</body>
</html>
```

Nun will ich erreichen, daß die rechte Spalte immer bis zur Fußzeile reicht, egal wie groß der  Inhalt der mittleren Spalte ist. Beim IE6 ist dies mit der Angabe: height:100% zu erreichen, bei Firefox und IE7 anscheinend gar nicht. Bei dem Originalbeispiel bei selhtml ist das Problem so gelöst, daß die mittlere Spalte einen relativen Abstand zur rechten Seite hat und so zumindest die ganz rechte Spalte nicht umflossen wird. Diese Lösung scheidet für mich al-lerdings aus, da bei meiner Website die rechte Spalte nur optional ist (das heißt dynamisch ange-zeigt bzw. ausgeblendet wird). Ist die rechte Spalte nicht vorhanden, soll der freiwerdende Platz also auch (ohne Änderungen an der CSS-Datei) genutzt werden.

Weiß irgend jemand, wie es möglich ist zu erreichen, daß die rechte Spalte immer so hoch ist, daß sie bis zur Fußzeile reicht?

Danke schon im Voraus
Gunwald


----------

