100% Höhe bei div-Containern?

[sirrpa]

Hallo!

Ich habe mal eine Frage bezüglich der Höhe von 100% bei Containern.

Es geht um folgende Seite:
http://www.webgarden.info/01_eigene_projekte_server/praxis/www.homoeopathische-praxis.info/startseite.htm
Die Container "hautpnavi", "inhalt" und "nebennavi" haben alle eine höhe von 100%. Nun kann man sehen, dass die Seite "zu lang" gezogen wird, ungefähr um die Länge der 140 px den ich den beiden oberen Containern ("kopf" und "thema")insgesamt an höhe zugewiesen habe......

wie kann ich das verhindern?

hier die css-datei:

html {
height:100%;
}

body {
height:100%;
margin:0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #131A46;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-variant: small-caps;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #550000;
text-decoration: none;
}

a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #550000;
text-decoration: none;
}

a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #550000;
text-decoration: none;
}

a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #550000;
text-decoration: underline;
}

div#aussen{
position: relative;
height:100%;
width:760px;
margin: auto auto;
background-color: #F9F5EE;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #550000;
border-left-color: #550000;
z-index:1
}

div#kopf{
position: relative;
width:760px;
height:120px;
z-index:2;
border: 1px dotted #550000;
}

div#thema{
position:absolute;
top:120px;
width:760px;
height:20px;
z-index:7;
border: 1px dotted #550000;
}

div#inhalt{
position:absolute;
left:140px;

width:500px;
height:100%;
z-index:6;
border-top-width:1px;
border-left-width: 1px;
border-right-width:1px;
border-top-style:dotted;
border-right-style: dotted;
border-left-style: dotted;
border-top-color:#550000;
border-right-color: #550000;
border-left-color: #550000;
top: 142px;

}

div#hauptnavi{
position:absolute;
top:142px;
width:140px;
height:100%;
z-index:5;
border-top-width:1px;
border-left-width: 1px;
border-right-width:1px;
border-top-style:dotted;
border-right-style: dotted;
border-left-style: dotted;
border-top-color:#550000;
border-right-color: #550000;
border-left-color: #550000;
}

div#nebennavi{
position:absolute;
left:640px;
top:142px;
width:120px;
height:100%;
z-index:4;
border-top-width:1px;
border-left-width: 1px;
border-right-width:1px;
border-top-style:dotted;
border-right-style: dotted;
border-left-style: dotted;
border-top-color:#550000;
border-right-color: #550000;
border-left-color: #550000;
}

wer mir da einen tipp geben könnte, dem wäre ich dankbar!

liebe grüsse von sirrpa

[Martin Hölter]

Hi!

Das ist IMHO eines der größten Probleme von CSS-Designs - man kann keine Boxen von ganz oben bis ganz unten laufen lassen, wenn eine andere Box mehr Inhalt hat. Ein Workaround ist es, nicht der Box die Hintergrundfarbe zu verpassen, sondern dem Body (oder einem alles umschließenden Elements) ein gekacheltes Hintergrundbild.

Zwei Beispiele:
SELFHTML-Beipsiel
THW Iserlohn.

Gruß aus Iserlohn

Martin

[sirrpa]

hallo Martin!
danke erstmal für deine Antwort....
irgendwie scheine ich heute ein Brett vorm Kopf zu haben, denn ich verstehe ned so genau, was du meinst mit "...wenn eine andere Box mehr inhalt hat" mehr Inhalt als 100%??? meine Boxen haben doch quasi noch gar keinen Inhalt??? *grübel*
die gepunkteten Linien sind übrigens nur zur Veranschulichung um zu sehen, wie die Boxen verlaufen, die kommen später wieder weg!!

Hi!

Das ist IMHO eines der größten Probleme von CSS-Designs - man kann keine Boxen von ganz oben bis ganz unten laufen lassen, wenn eine andere Box mehr Inhalt hat. Ein Workaround ist es, nicht der Box die Hintergrundfarbe zu verpassen, sondern dem Body (oder einem alles umschließenden Elements) ein gekacheltes Hintergrundbild.

Zwei Beispiele:
SELFHTML-Beipsiel
THW Iserlohn.

Gruß aus Iserlohn

Martin

[Martin Hölter]

Hi!

irgendwie scheine ich heute ein Brett vorm Kopf zu haben, denn ich verstehe ned so genau, was du meinst mit "...wenn eine andere Box mehr inhalt hat" mehr Inhalt als 100%??? meine Boxen haben doch quasi noch gar keinen Inhalt??? *grübel*

Ja. Du weist html eine Höhe von 100% zu. Diese Größenangabe bezieht sich auf den s.g. Viewport, also die Anzeigefläche im Browser. Sobald Scrollbalken da sind, ist der Inhalt höher als der Viewport, also mehr als 100%.

Du kannst dich leider nicht auf die gesamte Höhe der Seite beziehen, immer nur auf das Browserfenster.

UNd eine Bitte noch: unterlasse TOFU.

Gruß aus Iserlohn

Martin

[MudGuard]

Hi,

http://www.webgarden.info/01_eigene_projekte_server/praxis/www.homoeopathische-praxis.info/startseite.htm
Die Container "hautpnavi", "inhalt" und "nebennavi" haben alle eine höhe von 100%. Nun kann man sehen, dass die Seite "zu lang" gezogen wird, ungefähr um die Länge der 140 px den ich den beiden oberen Containern ("kopf" und "thema")insgesamt an höhe zugewiesen habe......

div#inhalt{
position:absolute;
height:100%;
top: 142px;

Dieses div ist so hoch wie der Viewport (dafür hast Du mit der height:100% gesorgt).
Das div fängt erst 142px unterhalb der Dokumentoberkante an (dafür hast Du mit top:142px gesorgt).

Wenn der Scrollbalken am oberen Anschlag ist, ragt das div also 142 Pixel nach unten aus dem Viewport, da es ja so hoch wie der Viewport ist, aber erst nach 142px anfängt.

cu,
Andreas