Probleme mit Seitenhöhe

[Jochen]

Hi,

ich programmiere gerade eine Homepage und da gibt es Seiten mit weniger Inhalt und Seiten mit viel Inhalt. Soweit ganz normal.

Bei Seiten mit viel Inhalt ist die Seitenhöhe min. so hoch wie die Browser-Höhe, dann sieht es auch alles ganz gut aus. Bei Seiten mit wenig Inhalt, ist die Seitenhöhe allerdings abgehackt.

Um das zu umgehen, habe ich

html {
   height: 100%;
   }

in die CSS-Datei eingegeben und bei allen folgenden, inneren Divs ebenfalls.

body {
   height: 100%;
   }

etc.

So sieht die Seite auch bei wenig Inhalt gut aus, sie geht bis zum unteren Rand des Browsers.

Nur: bei Seiten mit viel Inhalt, hört z.B. die Hintergrundfarbe des Hauptinhalts auch bei der Browserunterkante auf, wenn ich weiter runterscrolle, kommt einfach nix mehr. Es scheint, daß der Browser die Angabe

html {
   height: 100%;
   }

auf die Browserhöhe abstimmt - und nicht auf die tatsächliche Seitenhöhe, wenn diese höher als die sichtbare Höhe ist und man scrollen muss.

Ich dachte daß man das mit

html {
   min-height: 100%;
   }

erreichen kann, aber ich habe diesen Befehl in alle relevanten Divs eingetragen - und er hat gar keine Auswirkungen auf das Verhalten der Seite.

Was muss ich denn beachten, daß ein Div bei wenig Inhalt so hoch ist die sichtbare Höhe im Browser - und bei mehr Inhalt, wenn man scrollen muss, nicht an der Browserkante aufhört sondern so hoch ist wie der Inhalt?

Danke!

Lg
Jochen

[Steel]

Hallo!

Hast du mal in diesem thread geschaut? http://forum.de.selfhtml.org/?t=166508&m=1085929

Da hat wer ein aehnliches (das gleiche) Problem.

Ich haette es gern als Link gebracht, aber irgendwie schiebt mir das Forum da immer ein /my/ rein und das ist nicht so toll...

[Jochen]

Hallo!

Hast du mal in diesem thread geschaut? http://forum.de.selfhtml.org/?t=166508&m=1085929

Da hat wer ein aehnliches (das gleiche) Problem.

Ich haette es gern als Link gebracht, aber irgendwie schiebt mir das Forum da immer ein /my/ rein und das ist nicht so toll...

Danke für den Hinweis, aber damit komme ich irgendwie trotzdem nicht klar *g*

Mein Seitenaufbau ist so:

<div id="aussen-rahmen">
<div id="innen-rahmen">

<div id="hauptdiv">
die eigentlichen inhalte
</div>

</div>
</div>

Mein CSS-File:

html {
    height: 100%
    }

body {
    width: 100%;
    height: 100%;
    background: #000000;
    font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin: 0px;
    padding: 0px;
    color: #000000; /* text-farbe für das ganze dokument */
    border: 0px solid #ff0000;
    }

#aussen-rahmen {
    background: #ffffff;
    position: relative;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
    width: 800px;
    height: 100%;
    border-left: 0px solid #ff2000;
    border-right: 0px solid #ff2000;
    }

#innen-rahmen {
    background: #ff6000;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 790px;
    height: 100%;
    border: 0px solid #ff4000;
    }

#hauptdiv {
    background: #dddddd;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    height: 100%;
    width: 750px;               /* breite der seite */
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;

Damit sieht die Seite so aus:

http://www.jochen-lipps.de/test/index2.php

Klickt man auf den Menü-Punkt "Unsere Arbeiten" und scrollt runter, dann sieht man, daß der Seitenhintergrund genau an der Browserunterkante endet.

Lösche ich alle Höhenangaben:

body {
    width: 100%;
    background: #000000;
    font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin: 0px;
    padding: 0px;
    color: #000000; /* text-farbe für das ganze dokument */
    border: 0px solid #ff0000;
    }

#aussen-rahmen {
    background: #ffffff;
    position: relative;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
    width: 800px;
    border-left: 0px solid #ff2000;
    border-right: 0px solid #ff2000;
    }

#innen-rahmen {
    background: #ff6000;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 790px;
    border: 0px solid #ff4000;
    }

#hauptdiv {
    background: #dddddd;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 750px;               /* breite der seite */
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    }

... dann sieht die Seite so aus:

http://www.jochen-lipps.de/test/index.php

Jetzt ist zwar die Seite "Unsere Arbeiten" korrekt im aussehen, aber die Startseite ist "zu kurz".

Ich finde in meinem CSS-File einfach nicht den Fehler bzw. die Lösung für das Problem.