nicht angemeldet
Inhalt auf 100% der Fensterhöhe aufziehn
StruppiHallo,
Man muß ja mit der Zeit gehn, drum würd ich mich gerne von meinem alten (kompliziertem) Tabellen Code trennen und in die (einfache) Welt des layoutens mit CSS eintauchen - ja Pustekuchen :(
Ich versuch nun schon den ganzen Tag ein simples Problem zu lösen: Einen Inhalts bereich auf 100% der Fenster höhe aufzuziehn!
Da ich mich an die Zeit erinnere wo ich angefangen hab mit tabellen zu jonglieren - und es da am anfang auch nicht alles so geklappt hat wie ich wollte - denk ich mir fragste mal da gibts sicher nen Trick! :)
Im Grunde Standard Layout XYZ:
- Seite ist horizontal zentriert
- Header - fixe Höhe von 50px wegen image und backround effekten.
- Content 2 spaltig - variable höhe (besagtes problem) fixe breite von ~ 600px
- Footer - fixe Höhe von 40px wegen image und background effekten.
Hier ist der Code zu sehn: http://www.digital-environment.net/clean1.html
Nur wie bekomm ich nun Content und Sidebar auf 100%? Eigendlich ist nur die Sidebar wichtig!
Setze ich height auf 100% ists im firefox zu groß da er 100% zum fenster und nicht 100% zum parent nimmt (was meiner meinung nach logischer, einfacher und besser wäre!)
Was nicht geht ist den footer einfach irgendwie runter zu tricksen. Die Sidebar ist per bg-color abgesetzt und hat auch einen linken border der durch gehend sein soll.
Ich hab gesucht und gesucht und was gefunden das funktioniert wenn head & foot variable groß sein können: http://css.fractatulum.net/sample/layout7format.htm (super seite übrigens - danke!)
CSS ist cool - diese Struktur braucht mit tabellen ungleich mehr code - per CSS ist's einfacher standard conform zu schreiben (was für mich eine gewisse Bedeutung hat immer hin ist der w3c sowas wie ein vater für mich *lach*) - keep it simple - but it must work.. :(
Kann mir bitte jemand helfen?
Vielen Dank im Vorraus und dem Web ein Gruß!
Knut Meinke
-
Ich versuch nun schon den ganzen Tag ein simples Problem zu lösen: Einen Inhalts bereich auf 100% der Fenster höhe aufzuziehn!
Das ist bei einem fließenden Layout kein simples Problem, wie du schon gemerkt hast. Und da HTML/CSS genau dafür ausgelegt sind, die Darstellung in einer unbekannten Oberfläche mit unbekannten Maßen, sind solche Vorgaben nur mit Tricks zu erfüllen.
Der beste Tipp ist, es einfach sein zu lassen und die Höhe durch den Content zu definieren und nicht das Browserfenster. Dann wird es auch ein CSS Layout.
Struppi.
-
Der beste Tipp ist, es einfach sein zu lassen und die Höhe durch den Content zu definieren und nicht das Browserfenster. Dann wird es auch ein CSS Layout.
Das geht nicht :( Ich werde das Layout und Ästetik einer Seite nicht der Technik anpassen!
Mit folgendem JS Trick würde es gehn:
<body
onload="document.getElementById('content').style.height = document.getElementById('content').offsetHeight-95;"
onresize="document.getElementById('content').style.height = '100%';document.getElementById('content').style.height = document.getElementById('content').offsetHeight-95;">95px ist die Höhe von Fuß + Kopf. Ist aber ein doofer Trick.. gibts da wirklich keine Möglichkeit in CSS?
gruß Knut
-
Der beste Tipp ist, es einfach sein zu lassen und die Höhe durch den Content zu definieren und nicht das Browserfenster. Dann wird es auch ein CSS Layout.
Das geht nicht :( Ich werde das Layout und Ästetik einer Seite nicht der Technik anpassen!
was ist das denn für eine Einstellungen?
Du nutzt immer die Technik um ein Layout umzusetzen und wirst immer von der Technik eingeschränkt.
Wenn du ein Blatt Papier nutzt, wirst du doch auch diesen Platz bemalen und nicht noch den Schreibtisch drumherum?Bei CSS/HTML ist es eben genau umgekehrt, da passt sich dein Layout der Darstellungsfläche an, ansonsten machst du kein HTML Layout, sondern solltest dein Dokument als PDF oder ein Format wo die Fläche defniert werden kann veröffentlichen.
Mit folgendem JS Trick würde es gehn:
Wie gesagt es geht wenn nur mit Tricks, die aber i.d.R. immer zu anderen ungwollten Effekten führen.
Struppi.
-
Hi,
was ist das denn für eine Einstellungen?
Du nutzt immer die Technik um ein Layout umzusetzen und wirst immer von der Technik eingeschränkt.Sehe ich nicht so. Technik soll Layouts ermöglichen, nicht sie verhindern. Ein Blatt Papier ermöglicht es auf ihm zu malen. ich kann aber wenn ich will auch auf dem Schreibtisch weiter malen - CSS scheint mich aber zumindest in hinsicht auf dieses 100% problem zu beschränken.
Ein Problem das sich mit Tabellen recht einfach lösen läst.
Bei CSS/HTML ist es eben genau umgekehrt, da passt sich dein Layout der Darstellungsfläche an...
Das macht CSS ebend nicht. Wenn ich mit CSS das Layout an die Darstellungsfläche anpassen könnte, könnte ich ein Layout für 100% der Darstellungsfläche definieren. Wie wir feststellen geht das aber nicht. :(
Gruß Knut
-
Du nutzt immer die Technik um ein Layout umzusetzen und wirst immer von der Technik eingeschränkt.
Sehe ich nicht so. Technik soll Layouts ermöglichen, nicht sie verhindern. Ein Blatt Papier ermöglicht es auf ihm zu malen. ich kann aber wenn ich will auch auf dem Schreibtisch weiter malen - CSS scheint mich aber zumindest in hinsicht auf dieses 100% problem zu beschränken.Naja, du gehst aber dann nicht mit dem Schreibtisch zu deinem Kunden, oder?
Ein Problem das sich mit Tabellen recht einfach lösen läst.
Dann hast du ein Tabellenlayout - dann solltest du eine Tabelle benutzen, anstatt rumtricksen
Bei CSS/HTML ist es eben genau umgekehrt, da passt sich dein Layout der Darstellungsfläche an...
Das macht CSS ebend nicht. Wenn ich mit CSS das Layout an die Darstellungsfläche anpassen könnte, könnte ich ein Layout für 100% der Darstellungsfläche definieren. Wie wir feststellen geht das aber nicht. :(Doch, aber nicht so wie du es möchtest. Es passt den Inhalt an die Darstellungsfläche an, du möchtest die leeren Container anpassen.
Es gibt im Prinzip keine 100% Darstellungsfläche, denn HTML Seiten können unendlich lang oder breit sein.
Wie gesagt mit Tricks geht es, wobei ich mir nicht genau angeschaut habe was du möchtest, aber der Link von Siechfred könnte der Lösung schon nahe kommen, wobei man dort wieder für den IE ein bisschen rumtricksen muss.
Struppi.
-
-
-
Tag Knut.
gibts da wirklich keine Möglichkeit in CSS?
Vielleicht wäre das hier ein Ansatz:
http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm#header_footer_feststehendSiechfred
-
Vielleicht wäre das hier ein Ansatz:
http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm#header_footer_feststehend
Danke dir! Das schaut nach einer gangbaren Alternative aus.
Grüße Knut
-
-
-