DIV bis ans untere Ende der Seite?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angeben
aussehen
bestimmten wert pixel
browser
code
farbe
header
kopieren
letzte strich
navigation
notwendig code
pixel
position
rand
tabelle
text
unteren bildschirmrand
unteren element
unterschiedliche bildschirme
url
-
also ich habe da nun meine seite:
--------------------------------
--------------------------------
-----------header-----------
--------------------------------
--------------------------------
--------------navi-------------
--------------------------------
--------------------------------
----------content------------
--------------------------------
--------------------------------
(der erste und letzte strich sollen den rand des browsers darstellen)
wie man nun aber sehen kann, geht die contentbox nicht bis zum unteren fensterrand.
wie kann man sowas realisieren? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du umgiebst erst mal alles mit einem DIV, welches Du eine Höhe von 100% gibst. Sematisch setzt Du im Quellcode das DIV mit dem Content unter das DIV das alles umgibt. Peng fertig!
Gruß T. -
Damit das DIV auch 100% Höhe bekommen kann, ist folgender Code notwendig:
body, html { height: 100%; } -
am besten du gibst deiner div noch testweise nen rand, also
div { border: 1px solid black; }
vielleicht auch ne andere farbe oder so, der rand zeigt dir dann genau deine box -
Es sollte auch funktionieren, das äußere Div relativ zu formatieren (position:relative)
und da innere div position:absolute und dann bottom 0px -
so hab ich das nicht gemeint
das div soll nicht jnach unten. es ist gut son won es ist. es soll nur länger. ich könnte jetzt einen bestimmten wert pixel angeben, das bringt mir aber nichts da jeder unterschiedliche bildschirme hat. also der content soll von unter der navigation bis an den unteren bildschirmrand reichen. ps.: nen rand hat er schon, deswegen ja das ganze! -
Da gäbe es auch die Möglichkeit, dass du das ganze etwa in eine Tabelle packst (eine Spalte, zwei Zeilen), dann oben die Navigation reinhaust, der einen absoluten oder prozentualen Pixelwert gibst, dann den restlich verbleibenden Wert einfach deinem unteren Element zur Verfügung stellst. Das wäre dann der Proportionalwert.
Beispielsweise könntest du es dann so aussehen lassen:
<table> <thead> <tr height="100px"> <th> <!-- // Navigation // --> </th> </tr> </thead> <tbody> <tr height="1*"> <td> <!-- // Inhalt // --> </td> </tr> </tbody> </table>
Wäre zwar nicht gerade das was ich implementieren würde, aber es wäre eine Möglichkeit.
Beitrag zuletzt geändert: 2.12.2009 15:10:18 von temozarela -
ich nehme an dass dich die ungewollten Ränder stören die dir dein Browser anzeigt..
Probiere es mal mit CSS im Head des HTML Dokumentes
<style type="text/css"> <!-- body { margin: 0px; padding: 0px; } --> </style>
man kann es auch im Body-Tag einfügen
etwa so:
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" >
wenn du Frames verwendest sollte das so aussehen:
<frameset rows="xx,*" border="0" frameborder="0" framespacing="0"> <frame frameborder="0" marginwidth="0" marginheight="0" name="oben" ... > <frame frameborder="0" marginheight="0" marginwidth="0" name="nav" ... > <noframes> ...hier Iein Text falls der Browser keine Frames anzeigt... </noframes> </frameset>
freundlichst Teutates
-
druckertinte schrieb:
..... ich könnte jetzt einen bestimmten wert pixel angeben, das bringt mir aber nichts da jeder unterschiedliche bildschirme hat. also der content soll von unter der navigation bis an den unteren bildschirmrand reichen. ps.: nen rand hat er schon, deswegen ja das ganze!
Deshalb solltest Du mit Prozentwerten arbeiten und nicht mit festen Pixel, denn nur so kann sich das DIV am Browser orientieren.
Gruß Tom -
Hallo,
druckertinte wollte schreiben: So hab ich das nicht gemeint.
Der div soll nicht am unteren Rand positioniert werden.
Da die Platzierung bereits in Ordnung ist, aber ich möchte dass die Länge variabel ist. Wenn ich ihm als Höhe einen festen Wert in der Einheit Pixel geben würde, dann würde seine Höhe ja bei allen Auflösung gleich bleiben. Allerdings soll der content Bereich von der Navigation bis zum unteren Bildschirmrand reichen ohne dass auch Personen mit großen Auflösungen scrollen müssen.
Ich hab dir das mal als HTML zusammen gefasst. Das CSS ist im Header, du kannst ihn dir gerne anschauen bzw. kopieren und anpassen.
http://olearose.lima-city.de/help-you/druckertinte/layout1.html
Ist nur Quick'n'Diry, aber erfüllt seinen Zweck.
lg
Oleander
PS: @temozarela: Ich sag es ja nur ungern aber dein bzw. der Code ist mieß und man macht schon gar keine Layouts mit Tabellen.
€dit:
Bei meiner Version gibt es ein Problem bei zu viel content, er wird einfach abgeschnitten.
Du könntet im CSS zu #content p overflow: auto; hinzufügen.
Dann bekommt er scrollbalken bei zu viel Text.
Beitrag zuletzt geändert: 2.12.2009 16:07:42 von olearose -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
