|
|||
Dynamisches Layout - 100% Höhe - in allen Browsern realisieren
Ich möchte ein dynamisches Layout realisieren und bin eigentlich schon nahe dran. Nur im IE gibt es Probleme.
TOP und FOOTER sind jeweils ein fester Bereich, wobei MIDDLE sich dynamisch in alle Richtungen erweitert. Sobald der Inhalt von MIDDLE größer ist als der Bereich, dann lässt er sich scrollen. Das funktioniert im FF, Chrome und Safari. Aber leider nicht im IE7, IE8 und IE9 ... es sei denn ich lasse den <!DOCTYPE html> weg, dann funktioniert es auch im IE (Quicksmode). Jedoch kommt der Kompatibelitätsmodus nicht in Frage, da IE8 und IE9 dann die selben Fehler wie der IE7 aufweisen. Schon komisch das es im Quicksmode funktioniert aber im Standardmode nicht. Ich bin auf jeden Fall am Ende mit meinem Latein und kenne keinen weiteren weg mehr. Hab ihr vielleicht ein gute Idee? HTML-Code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dynamic</title> <style type="text/css"> html, body {height:100%;width:100%;padding:0px;margin:0px;overflow:hidden} table {border-spacing:0px;border-collapse:0px} .table, .middle {height:100%;width:100%} .top, .footer {background:#ccc} .middle {background:#666;vertical-align:top} .outer {position:relative;height:100%;width:100%} .inner {background:red;position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px;overflow:auto} </style> </head> <body style="position:relative"> <table class="table" style="table-layout:fixed"> <tr> <td class="top"><div style="position:relative;height:31px">TOP</div></td> </tr> <tr> <td class="middle"> <div class="outer"> <div class="inner"> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> </div> </div> </td> </tr> <tr> <td class="footer"><div style="position:relative;height:31px">FOOTER</div></td> </tr> </table> </body> </html> Geändert von Wootime (09.11.2012 um 23:29 Uhr) |
Sponsored Links |
|
|||
Eine sehr gute sogar: Verzichte auf Tabellen für's Layout.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Warum auf Tabellen verzichten? Wenn ich beispielsweise durch ein Klick auf einen Button eine neue Spalte einfügen lassen, also so:
HTML-Code:
... <table class="table" style="table-layout:fixed"> <tr> <td class="top"><div style="position:relative;height:31px">TOP</div></td> </tr> <tr> <td class="top"><div style="position:relative;height:31px">TOP 2</div></td> </tr> ... Könntest Du mir vielleicht einen Anlaufpunkt geben, wie es ohne Tabellen diesen Zweck erfüllen kann? |
|
|||
Das habe ich nicht gesagt. Lies genau
Zitat:
Kopf und Fuß erhalten position: fixed; der Mittelteil ist ein Blockelement mit oberem und unterem Außenabstand. - Das wäre schon mal ein Ansatz. Wenn du einen Button drückst, können mehrere Dinge auf einmal geändert werden. |
|
|||
Ja ich meine Zeile
So meinst Du es nicht oder? Bei dieser Variante wird die untere Scrollbar abgeschnitten. HTML-Code:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dynamic</title> <style type="text/css"> html, body {height:100%;width:100%;padding:0px;margin:0px;overflow:hidden} .top {position:fixed;top:0px;height:31px;width:100%;background:#ccc} .middle {background:red;display:block;height:100%;margin:31px 0px 31px 0px;overflow:auto} .footer {position:fixed;bottom:0px;height:31px;width:100%;background:#ccc} </style> </head> <body> <div class="top">TOP</div> <div class="middle"> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> </div> <div class="footer">FOOTER</div> </body> </html> Es funktioniert ja auch. Komischer Weise aber nur im Quicksmode, den man eigentlich nicht gerade nutzen sollte. Klar wenn man einen Button drückt, dann kann man Größen usw. auch auf anderen Elementen ändern. Dann ist es aber eben auch leider nicht mehr dynamisch. Ich denke das wird wohl nichts, so wie ich mir das vorstelle. Hab schon so viel ausprobiert |
|
|||
Ich hätte gedacht sogar einen Hack für den IE einsetzen zu können.
height: expression((document.documentElement.clientHeight - 31) + "px"); Angwendet auf das "inner" div würde es die 31 Pixel wieder nach oben holen. Weiß jemand warum die expression nicht funktioniert? |
|
|||||
Zitat:
Dagegen wäre box-sizing ein Mittel (dann musst du auf Außenabstände verzichten und stattdessen border oder padding festlegen. Zitat:
Zitat:
Zitat:
Zitat:
Designtechnisch kannst du dir überlegen, warum so ein Design sehr selten zu finden ist Wie wäre es stattdessen mit einer FooterStickAlt-Lösung (Siehe FAQ)? Dann könnte der Kopfbereich immernoch Fix stehen. Expressions wurden aus Performancegründen abgeschafft. |
|
|||
Wie müsste die expression dann richtig lauten damit sie funktioniert? Nach meiner Recherche können die wohl noch eingesetzt werden.
Ich verstehe nicht wie box-sizing dabei helfen kann den versteckten Footer (31px Höhe) im IE hochzuholen? Damit sage ich doch nur ob Innenabstände oder Border innen oder außen angefügt werden sollen. Die DIV-Tables hätte ich schon längst genutzt, aber na ja der IE halt. Ja da habe ich mich wohl falsch ausgedrückt. Das Design sollte sich dann anpassen. Ich hab auch schon gemerkt das man in dieser Richtung nicht viel findet. Ich glaube das ist einfach zu anspruchsvoll, leider. So bleibt mir nichts anderes übrig als alles absolut zu positioniren HTML-Code:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dynamic</title> <style type="text/css"> html, body {height:100%;width:100%;padding:0px;margin:0px;overflow:hidden} .top {position:absolute;top:0px;height:31px;width:100%;background:#ccc} .middle {position:absolute;top:31px;right:0px;bottom:31px;left:0px;overflow:auto} .footer {position:absolute;bottom:0px;height:31px;width:100%;background:#ccc} </style> </head> <body> <div class="top">TOP</div> <div class="middle"> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br />MIDDLE<br /><br /><br /><br /><br /><br /><br /> </div> <div class="footer">FOOTER</div> </body> </html> Geändert von Wootime (10.11.2012 um 00:57 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
layout in verschiedenen browsern | earworms | CSS | 9 | 17.06.2006 15:39 |
dynamische höhe bei box layout | roakin | CSS | 16 | 12.02.2005 23:44 |
3 spalten layout - immer auf gleiche höhe "auffüllen&qu | dimension | CSS | 2 | 22.09.2004 13:02 |
CSS Layout: Höhe dem Inhalt anpassen - mit Mindesthöhe | trequ | CSS | 3 | 05.09.2004 12:29 |