Div-größe anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
browser
code
dank
datum
element
erstellen
fenster
header
http
inhalt
jemand
layout
machen
mitte
position
positionieren
problem
url
versuch
-
So, mal wieder eine wahrscheinlich bescheuerte Frage von mir.
Ich habe 3 Div-Elemente, welche vertikal übereinander stehen sollen. Die größe des obersten und des untersten soll feststehen, (beispielsweise 100px) das mittlere Div-Element soll nun an die Fenstergröße angepasst werden. Problematik dabei ist, dass die Größe des Fensters variabel sein soll (also man kann es größer und kleiner ziehen) und dabei trotzdem immer (nur) den Raum zwischen den beiden anderen Div's ausfüllen soll. (ähnlich wie es beispielsweise bei einem Table-Element recht einfach zu realisieren wäre)
Die weitere Problematik besteht darin, dass in das mittlere Div-Element ein dynamischer Inhalt soll. Dieser soll dann ggf. in dem Div gescrollt werden. (overflow:auto?)
Wenn ich versuche, dies mit einem Table zu lösen, akzeptiert er das "overflow:auto" nur, wenn eine feste größe gesetzt wurde. Also bekomme ich bei
das Problem, dass die Mitte mit dem Inhalt mitwächst. Dies soll natürlich nicht so sein.<table> <tr> <td style="height:100px;">Oberer Inhalt</td> </tr> <tr> <td style="overflow:auto;">Mittlerer Inhalt</td> </tr> <tr> <td style="height:100px;">Unterer Inhalt</td> </tr> </table>
Kennt jemand eine elegante Methode, sowas mit HTML, css und wenn es unbedingt sein muss Javascript zu lösen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn ich das so richtig verstanden habe, willst du so Pseudo-Frames erstellen bei der Header und Footer mitscrollt. Du kannst ja Header und Footer `fixed` positionieren... Dann scrollen sie mit.
<div id="header" /> <div id="content" /> <div id="footer" />
`position: fixed;` wird von allen modernen Browsern unterstützt. (außer natürlich IE6-, aber der kann ja nicht als moderner Browser durchgehen)#header, #footer { height: 100px; position: fixed; left: 0; width: 100%; } #header { top: 0; } #footer { bottom: 0; } #content { padding: 100px 0; } /* Damit der Inhalt nicht vom #header bzw #footer verdeckt wird */
Ryan -
ryanblack schrieb: Wenn ich das so richtig verstanden habe, willst du so Pseudo-Frames erstellen bei der Header und Footer mitscrollt. Du kannst ja Header und Footer `fixed` positionieren... Dann scrollen sie mit.
<div id="header" /> <div id="content" /> <div id="footer" />
`position: fixed;` wird von allen modernen Browsern unterstützt. (außer natürlich IE6-, aber der kann ja nicht als moderner Browser durchgehen)#header, #footer { height: 100px; position: fixed; left: 0; width: 100%; } #header { top: 0; } #footer { bottom: 0; } #content { padding: 100px 0; } /* Damit der Inhalt nicht vom #header bzw #footer verdeckt wird */
Ryan
Naja mein IE 8 machts auch nicht mit und das versteh nicht da er es ja eigentlich machen sollte^^
Aber sonst voll und ganz zutreffend.
Eine nicht ganz so schöne aber mögliche alternative wäre vllt. es mit '%' zu machen was jedoch die höhe des header und footer schwierig macht. Sonst versuch es doch mit max-height um das ganze auf eine maximale größe zu begrenzen?!
MfG
karlsve -
ryanblack schrieb: Wenn ich das so richtig verstanden habe, willst du so Pseudo-Frames erstellen bei der Header und Footer mitscrollt. Du kannst ja Header und Footer `fixed` positionieren... Dann scrollen sie mit.
<div id="header" /> <div id="content" /> <div id="footer" />
`position: fixed;` wird von allen modernen Browsern unterstützt. (außer natürlich IE6-, aber der kann ja nicht als moderner Browser durchgehen)#header, #footer { height: 100px; position: fixed; left: 0; width: 100%; } #header { top: 0; } #footer { bottom: 0; } #content { padding: 100px 0; } /* Damit der Inhalt nicht vom #header bzw #footer verdeckt wird */
Ryan
Hm, das sah auf den ersten Blick nicht schlecht aus. Nur funktioniert es leider auch nicht ganz so, wie geplant. Durch das padding verlängert er das content-element offenbar um die 100+100px weiter nach unten. (zumindest bei Firefox) Aber danke für den Vorschlag ;)
Scheinbar bleibt einem da nichts anderes übrig, als auf ein Frameset umzusteigen - auch wenn ich die mega hässlich finde. :x
Naja mein IE 8 machts auch nicht mit und das versteh nicht da er es ja eigentlich machen sollte^^
Das Problem mit den '%' ist, dass die header- und footer-höhen ja fest stehen sollen - also bei sagen wir mal 100px. '%' würde das ganze Bild wieder zerreissen. Das Problem mit der max-height ist, dass ich ja keine Maximale größe habe, welche ich da einsetzen könnte.
Aber sonst voll und ganz zutreffend.
Eine nicht ganz so schöne aber mögliche alternative wäre vllt. es mit '%' zu machen was jedoch die höhe des header und footer schwierig macht. Sonst versuch es doch mit max-height um das ganze auf eine maximale größe zu begrenzen?!
MfG
karlsve
Das Fenster wird beispielsweise auf 300x300px geöffnet - nun kann der User das Fenster ja auch maximieren. schon muss ich das content-element mit einer höhe von 800px (-oder was weiss ich) haben. Da ist nach oben hin ja kaum eine Grenze.
Wie schon gesagt: Im Grunde soll es sich verhalten wie eine Tabelle, wo nur die obere und untere Zeile eine feste größe haben. Nur dass er halt, wenn der Inhalt in der Mitte zu groß wird scrollbar sein soll.
Beitrag zuletzt geändert: 26.7.2009 0:43:31 von nerdinator -
nerdinator schrieb:
Hast du etwa die Höhe von `#content` auf 100% gesetzt? Ist das nötig? Man könnte die Höhe von `#content` einfach `auto` lassen... Dann gibt es das Problem nicht, dass es immer 200px zu groß ist.
Hm, das sah auf den ersten Blick nicht schlecht aus. Nur funktioniert es leider auch nicht ganz so, wie geplant. Durch das padding verlängert er das content-element offenbar um die 100+100px weiter nach unten. (zumindest bei Firefox) Aber danke für den Vorschlag ;)
Ryan -
ryanblack schrieb:
Das Problem ist, wenn ich die Größe des '#content' nicht fest angebe, scrollt der bei 'overflow:auto' nicht mehr, was ja recht wesentlich für mein Problem ist.
Hast du etwa die Höhe von `#content` auf 100% gesetzt? Ist das nötig? Man könnte die Höhe von `#content` einfach `auto` lassen... Dann gibt es das Problem nicht, dass es immer 200px zu groß ist.
Ryan
Um noch zu verdeutlichen, was ich möchte (vielleicht wird dadurch die Fragestellung etwas eindeutiger):
Ich möchte im '#header' eine überschrift haben, im '#footer' eine eingabezeile und im '#content' soll dann eine unbekannte Menge von Daten welche dann erst eingelesen werden wieder gegeben werden.(wie in einer Shoutbox ;) )
Wenn mehr Daten vorhanden sind, als in den '#content' passen, soll er das halt scrollbar machen und immer nach unten scrollen. Wobei das nach unten scrollen bereits via Javascript bewerkstelligt ist - lediglich das 'scrollbar machen' bereitet mir Probleme.
Nach einem Bekannten, den ich zu dem Thema befragt habe, gibt es dazu keine Lösung, da es wohl am Sinn von Div-Elementen vorbei geht - oder so ähnlich.
Wenn jemand eine Lösung hat, wäre ich trotzdem glücklich, wenn mir die jemand mitteilt ;) -
nerdinator schrieb:
Wenn du height auf `auto` belässt und `overflow` nicht auf `auto` schaltest und #header & #footer `fixed` positioniert hast, dann werden die Scrollbalken des Browser Viewports automatisch angezeigt, wenn #content aus dem Rahmen geht. Wenn man den Viewport scrollt, dann scrollen #header & #footer nicht mit. (sie sind ja `fixed` positioniert) Perfekte Pseudo-Frames.
Das Problem ist, wenn ich die Größe des '#content' nicht fest angebe, scrollt der bei 'overflow:auto' nicht mehr, was ja recht wesentlich für mein Problem ist.
Ryan -
nerdinator schrieb:
Wenn jemand eine Lösung hat, wäre ich trotzdem glücklich, wenn mir die jemand mitteilt ;)
Ist das hier nicht genau das was Du suchst?
http://www.cssplay.co.uk/layouts/bodyfix.html
http://www.cssplay.co.uk/layouts/basics.html
Beitrag zuletzt geändert: 29.7.2009 2:19:13 von simuliertes -
simuliertes schrieb:
Genau das ist es ;) Nun muss ich mal durchschauen, wie die das machen und mal gucken, ob ich das raubkopiert bekomme ^^
nerdinator schrieb:
Wenn jemand eine Lösung hat, wäre ich trotzdem glücklich, wenn mir die jemand mitteilt ;)
Ist das hier nicht genau das was Du suchst?
http://www.cssplay.co.uk/layouts/bodyfix.html
Danke :) -
nerdinator schrieb:
simuliertes schrieb:
Genau das ist es ;) Nun muss ich mal durchschauen, wie die das machen und mal gucken, ob ich das raubkopiert bekomme ^^
nerdinator schrieb:
Wenn jemand eine Lösung hat, wäre ich trotzdem glücklich, wenn mir die jemand mitteilt ;)
Ist das hier nicht genau das was Du suchst?
http://www.cssplay.co.uk/layouts/bodyfix.html
Danke :)
pff um diese Uhrzeit noch wach, tztztz
Hab grad nochmal editiert.
Folgender Link macht es wohl einfacher es zu kopieren:
http://www.cssplay.co.uk/layouts/basics.html -
Also wenn ich das richtig sehe, ist das prinzip ganz einfach:
Oder sehe ich das falsch? Oo#top{ position:absolute; top:0px; height:100px; } #content{ position:absolute; top:100px; bottom:100px; overflow:auto; } #bottom{ position:absolute; bottom:0px; height:100px; }
EDIT: Ich sehe das wohl richtig. Zumindest Firefox tut, was er soll. Alle anderen eigentlich auch. Nur IE ist noch nicht getestet...
Beitrag zuletzt geändert: 29.7.2009 2:48:48 von nerdinator -
nerdinator schrieb:
Also wenn ich das richtig sehe, ist das prinzip ganz einfach:
Oder sehe ich das falsch? Oo#top{ position:absolute; top:0px; height:100px; } #content{ position:absolute; top:100px; bottom:100px; overflow:auto; } #bottom{ position:absolute; bottom:0px; height:100px; }
EDIT: Ich sehe das wohl richtig. Zumindest Firefox tut, was er soll. Alle anderen eigentlich auch. Nur IE ist noch nicht getestet...
Weil's mich auch interessiert habe ich mal eine komplett-Lösung gebastelt die bei mir in ff,Opera 9,ie 6 und Safari 3.2.2 funktioniert.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Ein Test mit dynamischem Content</title> <script type="text/javascript"> function machmirvieltext (txt,anzahl) { for (b=1;b<=anzahl;b++) { document.write('['+b+'] '+txt); } } </script> <style type="text/css"> div {border: 1px solid red;} html, body { height:100%; /* fix height to 100% for IE */ max-height:100%; /* fix height for other browsers */ /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow:hidden; /*get rid of scroll bars in IE */ /* */ } /* ALLE BROWSER */ #content { overflow:auto; position:absolute; top:123px; /* wie in #top */ bottom:55px; /* wie in #bottom */ left:0px; /* ganz links,weil keine navi... */ right:0px; } /* EXTRAWURST FUER IE */ * html #content { height:100%; width:100%; top:0px; left:0px; border-top:123px solid #fff; border-bottom:55px solid #fff; border-left: 10px solid #fff; /*Rand angleichen, nicht unbedingt notwendig*/ z-index: 3;/*Muss kleiner sein als der z-index von top & bottom*/ } /* KOPF */ #top{ top: 0px; position:absolute; height:123px; overflow:hidden; z-index: 5;} /*FUSS*/ #bottom { bottom: 0px; position:absolute; height:55px; overflow:hidden; z-index: 4; } </style> </head> <body> <div id="top" > <script type="text/javascript">machmirvieltext ('Kopf<br>',30)</script> </div> <div id="content"> <script type="text/javascript">machmirvieltext ('Mitte<br>',40)</script> </div> <div id="bottom"> <script type="text/javascript">machmirvieltext ('Fuß<br>',30)</script> </div> </body> </html>
Wie ich das sehe ist der Trick eher das html & body eine 100%-Höhe+overflow:hidden haben, was verhindert das die Gesamte Seite Scrollbar gemacht wird... -
Super, danke simuliertes ;)
Problem also gelöst - Thread kann geschlossen werden ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
