dynamischer Container mit festen Abständen nach oben und unten...geht das?

[Mel]

Hi,

ich hänge gedanklich fest...und bräuchte mal Eure Meinungen/Erfahrungen.

Ist es möglich, einem Container mit width und height jeweils 100% einem festen Abstand nach oben und unten zuzuweisen?

Danke,
Mel

[wahsaga]

hi,

Ist es möglich, einem Container mit width und height jeweils 100% einem festen Abstand nach oben und unten zuzuweisen?

wie meinen?

100% width sind kein problem, bzw. auto ohne margins/paddings der vorfahrenelemente und für den div selber reicht ja schon aus.

height 100% erfordert ebenfalls explizite höhenangaben für alle vorfahrenelemente.

aber was willst du dann noch mit abstand oben und unten?
dann wird's ja im ergebnis wieder größer als eine "bildschirmhöhe" - wozu?

gruß,
wahsaga

[Mel]

aber was willst du dann noch mit abstand oben und unten?
dann wird's ja im ergebnis wieder größer als eine "bildschirmhöhe" - wozu?

Ja, das ist leider eine komplizierte Sache...handelt sich um einen Hack für den IE. Es geht darum dass der Header (mit fester Höhe, genauer gesagt: 240px) fixiert sein soll und der footer auch (Höhe: 30px).

Habe den workaround hier aus dem Forum(sarchiv). Der funkioniert auch prima

* html, * html body { overflow:hidden; bottom:0; height:100%; }
* html #container_fix { position:absolute; top: 0;  z-index: 3; width: 100%; /*padding: 0 16px 0 0;*/ }
* html #footer_container { position:absolute; bottom:0; z-index: 3; width: 100%; padding: 0 16px 0 0; }
* html #content { width: 100%; border: red 1px solid; overflow: auto; height: 100%; }

Jetzt habe ich nur ein Problem. Der Inhalt im header und im footer schiebt sich ja dynamisch zusammen wenn ich das browserfenster verkleinere (logisch: 100%). Das wird aber leider nicht gewünscht (Befehl von höherer Ebene). Wenn ich aber dem Content im header und footer eine feste Breite gebe nützt mit der ganze schöne Workaround nix...ist logisch, da die zwei Elemente die Scrollbalken überdecken. Das sieht verheerend aus.

Was der gewünschten Ideallösung entsprechen würde: der Content in der Mitte sollte scrollbar sein wenn das Browserfenster zusammengeschoben wird...dynamische Scrollbalken erreiche ich ja mit overfow: auto und Höhen+ Breitenangaben in %. Diese Scrollbalken sollen aber nie vom footer und / oder vom header überlappt werden...deshalb die vermutlich sehr dumme Frage nach einem festdefinierten ABstand nach oben und unten.

Aber ich glaub das geht einfach nicht...ist sicher alles total unlogisch was ich da erzähle.

[wahsaga]

hi,

Jetzt habe ich nur ein Problem. Der Inhalt im header und im footer schiebt sich ja dynamisch zusammen wenn ich das browserfenster verkleinere (logisch: 100%). Das wird aber leider nicht gewünscht (Befehl von höherer Ebene). Wenn ich aber dem Content im header und footer eine feste Breite gebe nützt mit der ganze schöne Workaround nix...ist logisch, da die zwei Elemente die Scrollbalken überdecken. Das sieht verheerend aus.

ja, über die ganze seitenbreite gehende elemente stellen bei dieser art von workaround natürlich wieder ein problem dar.

mit den 16px padding-right versuchst du das überlagern der scrollbalken offenbar auszugleichen?

dann würde ich andersherum vorgehen: positionierung nicht von links aus, sondern von _rechts_ - und zwar mit 16px.
zusammen mit width:100% schieben sich die elemente dann zwar links um analoge 16px aus dem fenster heraus - aber dem kann man ja begegnen, in dem man die inhalte der elemente dann wieder 16px abstand vom rand einhalten lässt.

probier mal aus, ob das weiterhilft.

gruß,
wahsaga

[Mel]

HI,

danke für den tipp bin gerade dabei ihn umzusetzten, verstehs aber noch nicht ganz...

mit den 16px padding-right versuchst du das überlagern der scrollbalken offenbar auszugleichen?

Ja

dann würde ich andersherum vorgehen: positionierung nicht von links aus, sondern von _rechts_ - und zwar mit 16px.

Meinst Du postion: absolute; right: 16px; ?

zusammen mit width:100% schieben sich die elemente dann zwar links um analoge 16px aus dem fenster heraus - aber dem kann man ja begegnen, in dem man die inhalte der elemente dann wieder 16px abstand vom rand einhalten lässt.

Hm...da Du width wieder mit 100% angibst schliesse ich daraus dass eine feste Breite (von 1000px) also definitiv nicht möglich ist?

Ich hab das so verstanden dass ich den absolut positionieren footer (header auch) also right: 16px; zuordne...das löst aber nicht das Problem..

gleich eine Frage hinterher: ist es denn überhaupt möglich elemente mit fester Breite LINKS aus dem Browserfenster herauszuschieben?

[wahsaga]

hi,

Meinst Du postion: absolute; right: 16px; ?

ja.

Hm...da Du width wieder mit 100% angibst schliesse ich daraus dass eine feste Breite (von 1000px) also definitiv nicht möglich ist?

ich denke du willst elemente haben, die über die gesamte breite des anzeigebereiches gehen?
dann ist eine fixe größe von 1000px oder was auch immer natürlich unangebracht.

Ich hab das so verstanden dass ich den absolut positionieren footer (header auch) also right: 16px; zuordne...das löst aber nicht das Problem..

beispiel?

gleich eine Frage hinterher: ist es denn überhaupt möglich elemente mit fester Breite LINKS aus dem Browserfenster herauszuschieben?

natürlich. bei absoluter positionierung "verschwinden" die teile eines elementes, die oben und/oder links "aus der seite herausragen" einfach.
rechts und unten "herausragende" teile erzeugen hingegen in den meisten browsern einen scrollbalken, vergrößern also das "dokument" selber auch.

gruß,
wahsaga

[Mel]

Hi,

ich denke du willst elemente haben, die über die gesamte breite des anzeigebereiches gehen?
dann ist eine fixe größe von 1000px oder was auch immer natürlich unangebracht.

Im Prinzip will ich zwei SAchen auf einmal und das geht nicht denke ich : eine Breite die über die ganze Seite geht (width: 100%) und Elemente die sich aber nicht beim zusammenschieben des Browsers untereinander anordnen...und das kann ich ja nur unterbinden indem ich dem content im footer z.B. eine feste Breite gebe...womit ich wieder beim unschönen "footer-content-schiebt-sich-irgendwann-über-die-Scrolleiste"-Problem bin.

Ich hab das so verstanden dass ich den absolut positionieren footer (header auch) also right: 16px; zuordne...das löst aber nicht das Problem..

beispiel?

Nun ja es funktioniert natürlich wenn ich width: 100%; angebe wie Du auch geschrieben hast. Aber dann könnte ich auch das padding: 0 16px 0 0 ; verwenden, hätte gleichen Effekt.

natürlich. bei absoluter positionierung "verschwinden" die teile eines elementes, die oben und/oder links "aus der seite herausragen" einfach.

Stimmt, ist mir vorher irgendwie nie aufgefallen. Bin übrigens noch auf relativ interessantes Experiment gekommen...
da ich ja keine Scrollbalken habe (ausser die für den Content) kann ich header und footer eine Breite von z.B., 2000px geben. Dann mit position: absolute, right: 2000px schön weit vom Content-Scrollbalken entfernen. Mit margin-right: -1984px wieder in den sichtbaren Bereich holen, ohne den Scrollbalken rechts zu überdecken.

Wenn ich das Browserfenster nun zusammenschiebe schiebe ich header und footer weit nach links heraus...gewöhnungsbedürftig.

Wenn Du noch Ideen hast...würde mich sehr freuen.