nicht angemeldet
Element am unteren Rand des viewports positionieren
0 
Gunnar Bittersmann
0 0 0 0 
Matthias Apsel
0
Element am unteren Rand des viewports positionieren
Hallo,
newbie-Frage:
ich soll ein Layout bauen, das genau den viewport füllt.
Oben ein Header, unten ein footer, in der mitte soll ein element flexibel den verbleibenden platz nutzen.
hab verschiedene suchen probiert, aber nix passendes gefunden.
-
@@Tine:
nuqneH
ich soll ein Layout bauen, das genau den viewport füllt.
Oben ein Header, unten ein footer, in der mitte soll ein element flexibel den verbleibenden platz nutzen.Haben Header und Footer bekannte Höhen? Dann kanst du beide absolut bzw. fixed positionieren und dem body oben und unten antsprechendes padding geben.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Haben Header und Footer bekannte Höhen? Dann kanst du beide absolut bzw. fixed positionieren und dem body oben und unten antsprechendes padding geben.
Oder, wenn du pures HTML5 verwenden willst/kannst css calc
-
Oder, wenn du pures HTML5 verwenden willst/kannst css calc
HTML5 hat mit CSS3 sowas von garnichts zu tun :)
-
Haben Header und Footer bekannte Höhen? Dann kanst du beide absolut bzw. fixed positionieren und dem body oben und unten antsprechendes padding geben.
Oder, wenn du pures HTML5 verwenden willst/kannst css calc
Oder aber du positionierst die entsprechenden Elemente einfach absolute/fixed und gibst für den "mittelteil" Werte für oben und unten an - dabei streikt aber glaube ich der IE7.
-
@@suit:
nuqneH
dabei streikt aber glaube ich der IE7.
Was ist IE7? Irgendwas relevantes?
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
dabei streikt aber glaube ich der IE7.
Was ist IE7? Irgendwas relevantes?
Ich weiß es auch nicht - darum weiß ich nix Genaues :p
-
-
-
Haben Header und Footer bekannte Höhen? Dann kanst du beide absolut bzw. fixed positionieren und dem body oben und unten antsprechendes padding geben.
Oder, wenn du pures HTML5 verwenden willst/kannst css calc
mit calc kann man sich aber nicht auf ein anderes Element beziehen, oder:
z.B. 100%-height(Header)-
mit calc kann man sich aber nicht auf ein anderes Element beziehen, oder:
z.B. 100%-height(Header)Die Höhe des headers in Pixeln ist dir aber bekannt - schiebe diese Lösung aber auf die lange Bank, ist zwar schön, funktioniert aber nicht flächendeckend - das wird noch ein paar Jahre dauern.
-
Die Höhe des headers in Pixeln ist dir aber bekannt - schiebe diese Lösung aber auf die lange Bank, ist zwar schön, funktioniert aber nicht flächendeckend - das wird noch ein paar Jahre dauern.
Nein, die Höhe ist eben nicht bekannt, deswegen ja REferenz auf ein anderes Element.
Wg. Browserunterstützung würde mir ein aktueller webkit genügen
-
Nein, die Höhe ist eben nicht bekannt, deswegen ja REferenz auf ein anderes Element.
dh du hast einen Header und einen Footer mit flexibler Höhe und willst den rest dazwischen aufteilen?
Wg. Browserunterstützung würde mir ein aktueller webkit genügen
Dann nimm Tabellen-Eigenschaften
body als table, header, footer und inhalt als table-row - das funktioniert möglicherweise.
-
@@Tine:
nuqneH
Wg. Browserunterstützung würde mir ein aktueller webkit genügen
Wenn „aktuell“ auch „Canary“/„Dev“/„nightly“ sein darf: position: sticky.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-
-
-
-
ich soll ein Layout bauen, das genau den viewport füllt.
Oben ein Header, unten ein footer, in der mitte soll ein element flexibel den verbleibenden platz nutzen.Haben Header und Footer bekannte Höhen? Dann kanst du beide absolut bzw. fixed positionieren und dem body oben und unten antsprechendes padding geben.
Qapla'
Danke,
nein, nur der footer hat ne fixe Höhe, die Höhe des Heades soll sich nach seinem Inhalt richten.
-
-
Hallo!
newbie-Frage:
ich soll ein Layout bauen, das genau den viewport füllt.
Oben ein Header, unten ein footer, in der mitte soll ein element flexibel den verbleibenden platz nutzen.html,body {height: 100%;} #header {height: 20%;} #main {height: 60%;} #footer {height: 20%;}<body> <div id="header">...</div> <div id="main">...</div> <div id="footer">...</div> </body>Das dürfte aber wohl kaum die Aufgabe, bzw. das gewünschte Ergebnis sein ...! ;-)
Vermutlich soll das Layout_mindestens_den Viewport (in voller Höhe) ausfüllen.hab verschiedene suchen probiert, aber nix passendes gefunden.
Wonach hast du denn gesucht?
Probier's mal mit "sticky footer", da ich davon ausgehen würde, dass das deinem eigentlichen Anliegen entspricht.Gruß Gunther
-
html,body {height: 100%;}
#header {height: 20%;}
#main {height: 60%;}
#footer {height: 20%;}> ~~~html > <body> > <div id="header">...</div> > <div id="main">...</div> > <div id="footer">...</div> > </body> >Vermutlich soll das Layout_mindestens_den Viewport (in voller Höhe) ausfüllen.
Danke, das trifft´s schon ganz gut.
Es soll tatsächlich der gesamte viewport in der Höhe ausgefüllt werden.
Wie grade schon geschrieben, soll der Footer allerdings eine fixe Höhe haben, die Höhe des Headers soll sich nach seinem Inhalt richten.Was für eine Höhe gebe ich denn dann dem Main?
-
Hallo Tine!
Es soll tatsächlich der gesamte viewport in der Höhe ausgefüllt werden.
Wie grade schon geschrieben, soll der Footer allerdings eine fixe Höhe haben, die Höhe des Headers soll sich nach seinem Inhalt richten.Was für eine Höhe gebe ich denn dann dem Main?
Eine reine CSS-Lösung besteht bspw. darin, display:table[-row|-cell] zu verwenden.
Ich habe dir hier mal ein Beispiel erstellt.Das mittlere DIV-Element ist das, was "automatisch" an die verbleibende Höhe angepasst wird. Die beiden anderen richten sich entweder nach ihrem Inhalt wie im Beispiel, oder du kannst ihnen auch eine feste Höhe zuweisen.
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Ich habe dir hier mal ein Beispiel erstellt.
Für meinen Geschmack ist da zuviel div in der Suppe.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias!
Für meinen Geschmack ist da zuviel div in der Suppe.
Wenn du mit HTML5 arbeitest, kannst du ja einige davon durch Elemente mit entsprechender Semantik ersetzen.
Und die zusätzlichen Elemente mit display:table-cell sind eigentlich nur Chrome geschuldet, der u. a. Borders nur bei Elementen mit table-cell und nicht table-row darstellt.
Aber über etwaige zusätzliche HTML-Elemente zur Umgehung irgendwelcher Browser-Bugs rege ich mich nun wirklich nicht mehr auf ...! Solange ein Element aus einem bestimmten Grund existiert, ist es imho OK.
Gegen überflüssige "Divitis" bin ich allerdings auch allergisch. ;-)
Gruß Gunther
-
@@Gunther:
nuqneH
Und die zusätzlichen Elemente mit display:table-cell sind eigentlich nur Chrome geschuldet, der u. a. Borders nur bei Elementen mit table-cell und nicht table-row darstellt.
Nein. Das kann ich nicht nachvollziehen.
Chrome zeichnet Rahmen auch um "table-row"-Elemente. Natürlich nur, wenn 'border-collapse: collapse' fürs "table"-Element gesetzt ist.
Wenn nicht, dann gibt es gemäß Spec keine Rahmen. In anderen Browsern aber auch nicht.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry) -
Om nah hoo pez nyeetz, Gunther!
Für meinen Geschmack ist da zuviel div in der Suppe.
Wenn du mit HTML5 arbeitest, kannst du ja einige davon durch Elemente mit entsprechender Semantik ersetzen.
In HTML5 gehts dann ganz ohne
Gegen überflüssige "Divitis" bin ich allerdings auch allergisch. ;-)
Dann ist ja gut. Dir ist dann bestimmt schon aufgefallen, dass sich sehr oft ein allumgebendes Element sparen lässt ;-)
HTML4.01-Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css">~~~css html {padding: 0; height: 100%;}
body {display: table; border-collapse: collapse; table-layout: fixed; width: 100%; height: 100%; margin: 0;}
div {display: table-row; background: silver; height: 100%; }
#header {background: gold; height: auto;}
#footer {background: gold; height: 150px;}~~~html </style> </head> <body> <div id="header">Header<br>Höhe richtet sich nach Inhalt</div> <div id="content">Inhalt<br>Höhe richtet sich nach Inhalt<br>nimmt mindestens die restliche Fensterhöhe ein</div> <div id="footer">Footer<br>feste Höhe</div> </body> </html>Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias!
Gegen überflüssige "Divitis" bin ich allerdings auch allergisch. ;-)
Dann ist ja gut. Dir ist dann bestimmt schon aufgefallen, dass sich sehr oft ein allumgebendes Element sparen lässt ;-)
Ja, klar!
Aber mir ist nicht aufgefallen, dass ich offenbar den Fiddle nicht korrekt gespeichert hatte, der ein Fork aus einem anderen war. Ich habe den nochmal angepasst und jetzt sollte es passen ...!Gruß Gunther
-
Om nah hoo pez nyeetz, Matthias!
Dann ist ja gut. Dir ist dann bestimmt schon aufgefallen, dass sich sehr oft ein allumgebendes Element sparen lässt ;-)
Chrome ignoriert aber dann eine 'max-width' Angabe. FF und Opera interpretieren diese auch für <body>.
Gruß Gunther
-
-
-
-
Hi Gruß Gunther,
tausend Dank, perfekte Lösung!
ciao und viele Grüße Tine
-
-
-