|
|||
Relative und feste Größenangaben mixen
Hallo!
Ich habe ein Problem, für das ich keine Lösung habe. Ich habe einen Entwurf, der mit relativen Höhen- und Breitenangaben umgesetzt werden soll. Soweit so gut, es gibt Fuß, Mittelteil und Kopf und der Mittelteil soll einen overflow:auto bekommen. Der Fuß soll immer unten am Fensterrand kleben, die Seite soll immer so hoch wie das Fenster sein. So weit, so gut, das könnte man ja so lösen: Code:
kopf: height: 10% mittelteil: height: 80% overflow: auto fuss: height: 10% Was tun? Ich stehe vor einem logischen Problem, denn einerseits denke ich, das kann nicht funktionieren, andrerseits hoffe ich, dass es dafür trotzdem eine pragmatische Lösung gibt, die mir nur nicht einfällt. Weiss die jemand? Ich wäre glücklich. Vielleicht hab ich ja nur Tomaten auf den Augen. Vielen Dank schonmal für alle Tipps, Lalix |
Sponsored Links |
|
|||
So geht's:
body { margin:0; padding:0; } #content { padding-top:4.85em; padding-bottom:3em; padding-left:0; } #header { position:fixed; top:0px; left:0px; right:0px; text-align:center; padding:10px; } #footer { position:fixed; bottom:0px; left:0px; right:0px; text-align:center; padding:10px; } /* Angaben nur für den Internet Explorer mit Star-HTML-Hack */ * html, * html body { height:100%; overflow:hidden; } * html #header { margin:0; height:10%; } * html #content { padding:0.5em; height:85%; overflow:auto; } * html #footer { height:5%; padding-top:1%; } /* Kleines Extra für den IE */ * html #menu { margin:0.2em; } <body> <div id='header'>HeaderText</div> <div id='content'>Content beliebiger Länge</div> <div id='footer'>Footertext</div> </body> Oder schau mal unter aktuell.de.selfhtml.org/ tippstricks/css/footer/index.htm rein...
__________________
-------------------------- BlackSheep - das schwarze Schaf der Familie |
Sponsored Links |
|
|||
Leider liegt das Problem woanders
Hallo Blacksheep Khan!
Vielen Dank für deine Antwort! Leider trifft's das aber nicht: Ich brauche nicht einen festen Header oben und einen festen Footer unten, sondern ich brauche v.a. den Mittelteil, der sich immer a die Fensterhöhe anpasst. Das Problem ist ein logisches: Header und Footer sollen eine feste Höhe in Pixeln bekommen ud der Content-Teil soll immer exakt die Höhe haben, die dann vom Fenster noch übrig bleibt. Die soll er aber nicht nur optisch haben, sondern auch defacto, denn dort soll ein overflow: auto angegeben werden, damit der Teil gescrollt wird, wenn der Content länger wird. Das ist erstmal ein logischer Widerspruch - relative und feste Höhen kann man nicht mixen - trotzdem hoffe ich, dass es dafür eine Lösung gibt. Wer kann mir weiterhelfen? |
|
|||
Leider hilft auch das nicht.
Hallo ONeill!
Auch dir vielen Dank für die Antwort, aber trifft's auch das nicht: Der Mittelteil braucht eine Höhenangabe - er soll einen overflow: auto bekommen, und der geht nur mit einer Höhenangabe. Wenn ich dem Mittelteil keine Höhenangabe gebe, ist er immer so groß wie der darin enthaltene Content. Er soll aber immer genau die Höhe haben, die übrig bleibt, wenn Kopf und Fuß (die feste Höhen haben sollen) abgezogen werden und - für den Fall, dass der Content länger ist - einen overflow: auto bekommen. Für den muss zwingend die Höhe des divs angegeben werden. Als Nachschub: Ich bin durchaus in der Lage, in CSS Websites zu bauen und brauche keine Tips, wie man eine Seite mit Kopf, Mittelteil und Fuß baut. Ich brauche nur einen Tip wie ich das Dilemma des variabel hohen Mittelteils - dessen Höhe aber wegen des overflows angegeben werden muss - löse, wenn Kopf und Fuß feste Höhenangaben haben. Wer kann helfen? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
problem mit position relative und body height | Fansana | CSS | 3 | 18.10.2014 20:56 |
Relative Größenangaben bei Formularfeldern | morklopp | CSS | 3 | 07.08.2013 17:10 |
Div-Anordnung unterschiedlich - Warum? | AndMei | CSS | 2 | 15.12.2010 22:22 |
Was übersehe ich? | Psyclown | CSS | 2 | 19.10.2008 14:00 |
Feste und relative Breite nebeneinander | GrafZahl | CSS | 4 | 04.04.2005 18:53 |