• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kopf 100px, Fuß 100px, Content soll Rest füllen

T

Torsten.E

Neues Mitglied
Wie kann ich per CSS ein Layout definieren,
bei welchem der Kopf- und Fuß-Bereich eine feste Höhe haben und der Content (also der Bereich dazwischen) immer den gesamten Zwischenraum in der Höhe ausfüllt.
 
in dem du den content die Höhe gibst die der zwischenraum ausmacht.
wenn der Kopf 100 px hoch ist und bei 0 anfängt, (padding sollte auf null sein) un der fuß unteen bei 1000px anliegt und 100px hoch ist dann muss der zwischenteil 800px groß sein.
Ist ne simple Rechenaufgabe, oder verstehe ich die Frage falsch?

MfG
 
1. Klasse Grundschule

Ich war schon in der 1. Klasse Grundschule :-)

Der Kopf- und Fuß- Bereich haben eine feste Höhe, das ist richtig. Aber der mittlere Bereich soll dynamisch sein und immer den ganzen Bereich dazwischen ausfüllen.

D.h. die "Gesamt"-Höhe kenne ich ja gar nicht, da diese ja Browser/Auflösung abhängig ist.

Das währe dann:

x = y - ("Höhekopf" + "Höhefuß")

Hmmm... weis nicht in welcher Klasse das berechnet wird.

Grüße

Torsten.E
 
Kein Fixierter Header/Footer

Ich will den Header/Footer nicht fixieren.

Einfach nur 50px Header, 50 px Footer und dazwischen ein DIV, der genau so hoch ist, wie der vorhandene Platz.
 
Hallo Torsten,

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
</head>
<body>
<div id="wrapper">
     <div id="top">Kopf</div>
     Inhalt
     <div id="footer">Fu&szlig;</div>
</div>
</body>
</html>
CSS:

Code: 
html {
     height:100%;
}
body {
     width:100%;
     height:100%;
}
#wrapper {
     position:relative;
     width:100%;
     min-height:100%;
     height:auto !important;
     height:100%;
     padding-bottom:100px;
}
#top {
     clear:both;
     height:100px;
     width:100%;
}
#footer {
     position:absolute;
     left:0;
     bottom:0;
     width:100%;
     height:100px;
}
Grüße
Bernhard
 
schaut richtig ist, ist es aber nicht ganz :-)

Hey Bernhard,

den "wrapper" verstehe ich nicht.
Wenn ich dem Wrapper mal eine hintergrundfarbe gebe, geht diese nicht mal über die bildschirmhälfte (in der höhe) hinaus, also was macht der wrapper da. Meiner Meinung nach, funktioniert er nicht.
http://www.schwedenhaus-ag.de/test.html

Optisch schaut es aber korrekt aus, wenn man von der Hintergrundfarbe absieht.

So und jetzt die große Kunst.
Wie bekomme ich in diesen Bereich einen linken DIV, der genau so hoch ist wie der Bereich "Inhalt".
 
Torsten.E schrieb:
Hey Bernhard,

den "wrapper" verstehe ich nicht.
Wenn ich dem Wrapper mal eine hintergrundfarbe gebe, geht diese nicht mal über die bildschirmhälfte (in der höhe) hinaus, also was macht der wrapper da. Meiner Meinung nach, funktioniert er nicht.
http://www.schwedenhaus-ag.de/test.html

Optisch schaut es aber korrekt aus, wenn man von der Hintergrundfarbe absieht.
Zum Vergrößern anklicken....

Hallo Torsten,

Du kannst entweder dem body die Hintergrundfarbe geben, oder Du übernimmst
auch die ersten Zeilen von dem, was ich Dir oben gegeben habe:

Code: 
html {
    height:100%;
}
Der Wrapper ist die gesamte Seite, soll mindestens so hoch sein, wie das
Browserfenster (min-height), soll aber höher werden, wenn der Inhalt nicht
ins Fenster passt (height:auto;), damit der IE6 das auch kann, sagen wir
ihm noch height:100% - das wird von den anderen Browsern ignoriert, weil
sie bei auto "!important" zur Kenntnis nehmen.

Torsten.E schrieb:
So und jetzt die große Kunst.
Wie bekomme ich in diesen Bereich einen linken DIV, der genau so hoch ist wie der Bereich "Inhalt".
Zum Vergrößern anklicken....

Google mal nach faux columns...

Grüße
Bernhard
 
Hmmmm.. min-height

Genau, und durch "min-height" sagst Du ja, er soll mindestens so groß wie das Browserfenster werden.

Also muß auch die Hintergrundfarbe den Bereich "Inhalt" komplett ausfüllen, ansonsten ist der wrapper nicht so hoch wie der Browser und die Höhenangaben sind praktisch für die Katz.

Wie sollen denn sonst innerhalb von Inhalt die DIV's korrekt plaziert werden, wenn der wrapper eine "falsche" Größe hat.

Kann auch sein, dass ich auf dem Schlauch stehe
 
Torsten.E schrieb:
Kann auch sein, dass ich auf dem Schlauch stehe
Zum Vergrößern anklicken....

Hallo Thorsten,

Du hast diese Angabe immer noch nicht ergänzt:

Bernhard schrieb:
Code: 
html {
     height:100%;
}
Zum Vergrößern anklicken....

Imbericle schrieb:
Bernhard schrieb:
Code: 
     min-height:100%;
     height:auto !important;
     height:100%;
Zum Vergrößern anklicken....
Ich lerne gerne dazu, deshalb:

Das kann doch nicht sein, dass das was du da machst korrekt ist oder?
Was macht denn height und min-height zusammen für einen Sinn?
Das height muss doch weg, und das height:auto; auch odeR?

MfG
Zum Vergrößern anklicken....

Warum ich es mache, habe ich Torsten schon erklärt.

Nochmal ausführlicher: der IE 6 (?) kennt min-height nicht, interpretiert aber
height fälschlich wie min-height...

Wenn es Dich stört, schreib ein extra Stylesheet für den IE und binde dieses
über Conditional Comments ein.

Grüße
Bernhard
 
Licht brennt

Ahhhhh........ hab's ergänzt, schaut schon besser aus :-)

Jetzt noch die DIV's in's Schwarz setzen, dann wähe es super

upps.. zu früh gefreut, schaut es euch an, klappt nicht, geht unten zu weit raus
 
Torsten.E schrieb:
Ahhhhh........ hab's ergänzt, schaut schon besser aus :-)

Jetzt noch die DIV's in's Schwarz setzen, dann wähe es super

upps.. zu früh gefreut, schaut es euch an, klappt nicht, geht unten zu weit raus
Zum Vergrößern anklicken....

Stimmt, da hab ich einen Fehler gemacht: ersetze beim wrapper "padding-bottom"
durch "margin-bottom" (das ist drin, damit der Inhalt nicht unter den Footer läuft.

Grüße
Bernhard
 
Ok funtzt, weiter ...

Jetzt will in den "schwarzen" Bereich, welcher praktisch vom wrapper sichtbar ist einen "DIV" quetschen, der praktisch zwischen header und footer klemmt.
 
habe ich schon

das habe ich schon, leuchtet mir aber nicht ein.

Der "schwarze" Bereich, ist doch praktisch von 2 DIV's unten und oben begrenzt. Also müßte doch wie der "wrapper" wieder ein DIV dazwischen quetscht werden können, was aber nicht geht.

Mir geht's ja auch darum, dass ich das Ganze verstehe :-)
 
Hallo Torsten,

Torsten.E schrieb:
das habe ich schon, leuchtet mir aber nicht ein.
Zum Vergrößern anklicken....

Dann stell gezielt Fragen zu dem, was Dir nicht einleuchtet.

Torsten.E schrieb:
Der "schwarze" Bereich, ist doch praktisch von 2 DIV's unten und oben begrenzt. Also müßte doch wie der "wrapper" wieder ein DIV dazwischen quetscht werden können, was aber nicht geht.
Zum Vergrößern anklicken....

Der "schwarze Bereich" ist Dein gesamtes Browserfenster. Darin nimmt der
"gelbe Bereich" 100px von der Höhe weg und das padding-bottom nimmt
auch nochmal 100px weg.
Der "rote Bereich" nimmt nichts weg, da er absolut positioniert ist.

Berechnungen wie 100% minus 200px sind in CSS nicht möglich, daher
brauchen wir einen anderen Weg...

Einen davon habe ich Dir genannt: faux columns

Ein anderer wäre, Du positionierst top absolut und entfernst das padding
aus dem Wrapper, dann hat dieser wieder die volle Höhe. Dann musst Du
Dir aber etwas neues einfallen lassen, um zu verhindern, dass Inhalte unter
dem "gelben Bereich" oder dem "roten Bereich" verschwinden...

Torsten.E schrieb:
Mir geht's ja auch darum, dass ich das Ganze verstehe :-)
Zum Vergrößern anklicken....

;-) ich kann nur für mich sprechen: ich werde Dir hier nicht Stück für Stück
Deine komplette Website bauen, Dir aber gerne Tipps und Anregungen geben,
oder auch auf Fehler hinweisen.

Grüße
Bernhard
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben