zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamisches Layout - 100% Höhe - in allen Browsern realisieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.11.2012, 23:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2012
Beiträge: 5
Wootime befindet sich auf einem aufstrebenden Ast
Frage 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>
Ich weiß, man könnte alles absolut positionieren. Dann kann ich aber nicht mehr so einfach, neue Zeilen hinzufügen bzw. wieder ausblenden ... so dass sich MIDDLE immer nach den vorhandenen Zeilen ausrichtet.

Geändert von Wootime (09.11.2012 um 23:29 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.11.2012, 23:37
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Wootime Beitrag anzeigen
Hab ihr vielleicht ein gute Idee?
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.11.2012, 23:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2012
Beiträge: 5
Wootime befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
Verzichte auf Tabellen für's Layout.
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>
...
Dann wird der mittlere Bereich automatisch kleiner. Ich wüsste nicht das das ohne Tabellen funktioniert?

Könntest Du mir vielleicht einen Anlaufpunkt geben, wie es ohne Tabellen diesen Zweck erfüllen kann?
Mit Zitat antworten
  #4 (permalink)  
Alt 10.11.2012, 00:02
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Wootime Beitrag anzeigen
Warum auf Tabellen verzichten?
Das habe ich nicht gesagt. Lies genau

Zitat:
Zitat von Wootime Beitrag anzeigen
Dann wird der mittlere Bereich automatisch kleiner. Ich wüsste nicht das das ohne Tabellen funktioniert?
Du meinst, wenn du eine weitere Zeile einfügst.
Kopf und Fuß erhalten position: fixed; der Mittelteil ist ein Blockelement mit oberem und unterem Außenabstand. - Das wäre schon mal ein Ansatz.

Zitat:
Zitat von Wootime Beitrag anzeigen
Könntest Du mir vielleicht einen Anlaufpunkt geben, wie es ohne Tabellen diesen Zweck erfüllen kann?
Wenn du einen Button drückst, können mehrere Dinge auf einmal geändert werden.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.11.2012, 00:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2012
Beiträge: 5
Wootime befindet sich auf einem aufstrebenden Ast
Standard

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>
Ich könnte das auch absolut positionieren, das finde ich aber unsauber. Wenn man sich das mal 100 Templates vorstellt, die sich immer mal wieder von der Höhe etc. teilweise ändern, wäre das sehr sehr aufwendig Mit meiner Variante wäre dieser Auswand nicht mehr vorhanden, da es sich automatisch überall ausrichtet, je nachdem welche Bereiche dazu kommen.

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
Mit Zitat antworten
  #6 (permalink)  
Alt 10.11.2012, 00:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2012
Beiträge: 5
Wootime befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 10.11.2012, 00:38
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Wootime Beitrag anzeigen
So meinst Du es nicht oder? Bei dieser Variante wird die untere Scrollbar abgeschnitten.
Dir sollte auch klar sein, warum das so ist 100% +2*31Px > 100%.

Dagegen wäre box-sizing ein Mittel (dann musst du auf Außenabstände verzichten und stattdessen border oder padding festlegen.

Zitat:
Zitat von Wootime Beitrag anzeigen
Mit meiner Variante wäre dieser Auswand nicht mehr vorhanden, da es sich automatisch überall ausrichtet, je nachdem welche Bereiche dazu kommen.
Dann verwende display: table; Das befreit dich aber nicht vom Fehler im IE.

Zitat:
Zitat von Wootime Beitrag anzeigen
Es funktioniert ja auch. Komischer Weise aber nur im Quicksmode, den man eigentlich nicht gerade nutzen sollte.
Quirksmode.

Zitat:
Zitat von Wootime Beitrag anzeigen
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.
Gerade dann ist es dynamisch. Du meinst wohl, das Design passt sich dann nicht mehr automatisch an. Das hast du nicht gesagt, dass du das willst.

Zitat:
Zitat von Wootime Beitrag anzeigen
Ich denke das wird wohl nichts, so wie ich mir das vorstelle. Hab schon so viel ausprobiert
Es gibt schon Möglichkeiten, aber vieles davon ist unschön und problembehaftet.

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 10.11.2012, 00:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2012
Beiträge: 5
Wootime befindet sich auf einem aufstrebenden Ast
Standard

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>
Funktioniert sogar im IE7 ... immerhin

Geändert von Wootime (10.11.2012 um 00:57 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:09 Uhr.