Problem bei CSS und voller Bildschirmhöhe

Computer: Software & Programmierung HTML & CSS
1

moin!!

ich bin neu im thema css-layout und habe ein kleines problem:

ich will meinen css-container auf (annähernd) voller bildschrimhöhe haben und unten soll eine fußzeile hin. so sieht mein css momentan aus:

html, body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
height: 98%;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

#container {
position: relative;
width: 780px;
height: auto !important;
height: 100%;
min-height: 100%;
background: #FFFFFF;
margin: 10px auto;
border: 1px solid #000000;
text-align: left;
}

#header {
height: 80px;
background: #DDDDDD;
padding: 0 10px 0 20px;
}

#header h1 {
margin: 0;
padding: 10px 0;
}

#links {
position: absolute;
top: 80px;
left: 0;
width: 130px;
min-height: 70%;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}

#rechts {
position: absolute;
top: 80px;
right: 0;
width: 130px;
min-height: 70%;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}

#inhalt {
margin: 0 200px;
padding: 0 10px;
height: auto !important;
height: 100%;
min-height: 100%;
}

#footer {

padding: 0 10px 0 20px;
background:#DDDDDD;
height: 30px;
}

#footer p {
margin: 0;
padding: 10px 0;
}

das ergebnis gibt’s unter http://tanzschule-fricke.de/neu

der inhalt-container will aber scheinbar nicht ganz runter. woran liegt’s?

lg n.

2

Tach!

ich will meinen css-container auf (annähernd) voller
bildschrimhöhe haben

Das geht mit CSS nicht, denn CSS hat keine Ahnung, wie groß der Bildschirm ist. Macht ja auch keinen Sinn, die Größe einer Website an der Bildschirmgröße zu orientieren, da würde ja u.U. nicht alles sichtbar sein.
CSS kann sich nur am Viewport orientieren, aber das ist ja auch der Bereich, in dem Deine Website steht. Die Bildschirmgröße ist für die Erstellung von Websites normalerweise nicht relevant.

der inhalt-container will aber scheinbar nicht ganz runter.
woran liegt’s?

An Dir.
Du gibst dem body eine Höhe von nur 98% und dem #container einen Außenabstand oben und unten von je 10px. Und genauso siehts im Browser auch aus.

Grüße,
-Efchen

3

moin!!

sorry, vielleicht habe ich mich da falsch ausgedrückt. #container ist nicht das problem. der ist so, wie ich ihn haben will.

#inhalt jedoch geht, im gegensatz zu #links und #rechts nicht bis unten und daurch hängt der footer (der graue balken) irgendwo in der luft und nicht unten, wo ich ihn aber gerne hätte…

lg n.

4

#inhalt jedoch geht, im gegensatz zu #links und #rechts nicht
bis unten und daurch hängt der footer (der graue balken)
irgendwo in der luft und nicht unten, wo ich ihn aber gerne
hätte…

Das ist ein Fall für „Faux Columns“.

5

Doch aber auch nur bedingt, oder nicht? Denn der Footer schwirrt mir dann immer noch irgendwo zwischendrin rum…

lg n.

6

Zwei benachbarten Elementen kann man nur eine gemeinsame Höhe geben, wenn man sie als Tabellenzelle definiert. Das kann aber ein weit verbreiteter Browser nicht. Also muss man sich behelfen. Und das geht mit Grafiken (Faux Columns). Ich hab auf Deinen Link geklickt, bei mir sitzt der Footer da, wo Du ihn haben willst.

7

moin!!

hatte das footer-problem in der zwischenzeit anders umgangen. habe jetzt aber ein neues problem mit der höhe…

vielleicht mag da ja noch mal wer draufgucken. ich kriege die container-höhe nicht durch die höhe der rechten spalte bestimmt…

lg n.

8

ich kriege die
container-höhe nicht durch die höhe der rechten spalte
bestimmt…

Warum benutzt Du absolute Positionierung? Ist doch völlig überflüssig. Wenn Du #links und #rechts (Schlecht gewählter Name übrigens, was machst Du, wenn #rechts mal nach links wandert und umgeehrt? Auch Klassen-/ID-Namen sollten gemäß der Semantik des Inhalts gewählt werden, genauso wie alles in HTML) floatest und nach #rechts im HTML-Code ein Element mit clear einfügst, dann umschließt #container die größere Höhe von #rechts/#links.