✔ Länge der Scroll-Leiste im Firefox

O

Overtone

Grünschnabel
Folgende Code erzeugt bei mir eine Seite, welche prinzipiell einer Frameseite mit Header- und darunter liegendem Contentframe simuliert. Sinn und Zweck ist es mittels PHP und CSS den Header-Bereich immer fix darzustellen, während der Contentbereich scrollbar ist:

Code: 
<HTML>
<style type="text/css"> 
body, html {
height:100%;
padding:0;
margin:0;
border:0;
overflow:hidden;
} 
#head { 
position:absolute;
width:820px;
background:#dddddd;
z-index:4;
padding-left:10px;
} 
#content { 
height:100%;
max-height:80%;
overflow:auto;
z-index:3;
padding-top:110px;
padding-left:10px;
} 
</style>
<BODY>
<div id="head">Inhalt Header
</div>
<div id="content">Inhalt Content
</div>
</BODY>
</HTML>

Das Ganze funktioniert eigentlich wunderbar. Ändere ich jedoch die (euch sicherlich sofort ins Auge gefallene) Angabe bei max-height in 100% verschwindet im Firefox der untere Bereich der Scroll-Leiste. D. h. der Scrollpfeil ist ganz verschwunden, der Scrollbalken verschwindet fast vollständig im Nirvana. Mit der Angabe 80% erscheint alles halbwegs ordnungsgemäß, bringt aber, je nach Größe des Browserfensters, einiges an weißem Bereich am unteren Rand. Entferne ich die Angabe padding-top:110px; erscheint auch bei max-height 100% der Scrollbalken im Firefox ordnungsgemäß. Dann verdeckt der Header jedoch (logisch) den oberen Bereich des Contents. Gibt es hier eine andere (bessere) Lösung? Im IE sieht alles bei allen Einstellungen gleich perfekt aus.
 
Hi,

mach es besser so:
CSS: 
#head {
position:absolute;
width:820px;
background:#dddddd;
z-index:4;
padding-left:10px;
height:110px;
}
#content {
position:absolute;
top:110px;
bottom:0;
width:820px;
overflow:auto;
z-index:3;
padding-left:10px;
}

Die von dir angewandte height:100%-Deklaration für #content bezieht sich auf die vollständige Fensterhöhe, zu der gemäß dem Box-Modell der obere Innenabstand padding-top:110px hinzugezählt wird, womit der untere Boxenrand mit dem Steuerungspfeil der vertikalen Scrollleiste um 110px zuzüglich der Headerhöhe im unteren Fensterbereich verschwindet, dem du mit max-height:80% entgegenwirken wolltest.

Dass dies bei dir im IE nicht der Fall ist, liegt einfach daran, dass du das HTML-Dokument ohne jegliche Doctype-Deklaration nicht im standardkonformen Modus übergibst, weshalb die Browser in den sog. "Quirksmodus" schalten, und der IE in diesem Darstellungsmodus das "Box-Modell" falsch bzw. nicht interpretiert.

Im Anschluß folgt ein Komplett-Beispiel, das, falls gewünscht, auch den IE6 berücksichtigt, da dieser die kombinierte top / bottom-Deklaration für #content nicht unterstützt, und daher auf die height:100% angewiesen ist, um die Box bis zum unteren Fensterrand auszudehnen.

Mit dem XML-Prolog vor der Doctype-Deklaration (XHTML-Variante "Strict") schaltet der IE6 in den "Quirksmodus", sein Nachfolger (IE7 + 8), und die übrigen Browser laufen hingegen im "Standardmodus". Sinn dieser Übung ist es, die angesprochene Fehlinterpretation des "Box-Modells" sich zu nutzen zu machen, um für den Block #content einen obereren Rahmen einrichten zu können, damit der Elementinhalt im IE6 an der gewünschten Position im Viewport erscheint, die komplette Box aber nicht wieder um 110px nach unten vergrößert wird.

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2009-06-20" />

<title>tutorials.de | demo_Overtone</title>

<style type="text/css">
body, html {
height:100%;
padding:0;
margin:0;
border:0;
overflow:hidden;
}
#head {
position:absolute;
width:820px;
background:#dddddd;
z-index:4;
padding-left:10px;
height:110px;
}
#content {
position:absolute;
top:110px;
bottom:0;
width:820px;
overflow:auto;
z-index:3;
padding-left:10px;
}
* html #content { /* Für IE6 */
top:0;
height:100%;
border-top:110px solid #ddd;
}
</style>

</head>
<body>

<div id="head">Inhalt Header</div>
<div id="content">Inhalt Content</div>

</body>
</html>


mfg Maik
 
Super, klappt einwandfrei. Als kleine aber wichtige Anmerkung vielleicht eine klitzekleiner Kritikpunkt:

Die Angabe zu "* html #content { /* Für IE6 */" ist nicht nur für den IE6 sondern auch für IE7 und IE8 notwendig, da ansonsten im IE überhaupt kein Scrollbalken erscheint!

Im Übrigen erscheint der Scrollbalken jetzt nicht mehr am rechten Browserrand sondern exakt an der rechten Kante der 820 Pixel Breite, was aber besser aussieht und durchaus auch funktioneller ist!

Als DOCTYPE konnte ich leider "nur" folgendes angeben, da es mir sonst komplett alle Tabellen gehörig verschiebt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ist das problematisch? Es handelt sich bei dieser Seite aber ohnehin nur um eine passwortgeschützte Editionsmaske (deshalb auch kein Link), welche in keinerlei Suchmaschinen zu finden ist!

Vielen Dank
Overtone
 
Zuletzt bearbeitet:
Overtone hat gesagt.:
Als kleine aber wichtige Anmerkung vielleicht eine klitzekleiner Kritikpunkt:

Die Angabe zu "* html #content { /* Für IE6 */" ist nicht nur für den IE6 sondern auch für IE7 und IE8 notwendig, da ansonsten im IE überhaupt kein Scrollbalken erscheint!

Als DOCTYPE konnte ich leider "nur" folgendes angeben, da es mir sonst komplett alle Tabellen gehörig verschiebt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Zum Vergrößern anklicken....
Dass der "Star-HTML-Hack" bei dir nun auch für den IE7 + 8 erforderlich ist, liegt an deinem gewählten Doctype, mit dem die Browser ebenfalls im "Quirksmodus" laufen, und sich die aktuellen IE-Versionen in diesem Darstellungsmodus wie ihre Vorgänger aus dem letzten Jahrhundert verhalten.

In meinem Beispiel erscheint der Scrollbalken im IE7 + 8 ohne den "Star-HTML-Hack".

mfg Maik
 
Wieder was gelernt. Danke.

Wie aber bereits schon gefragt: Für meine Anwendung dürfte dies unerheblich sein, oder?
 
Wenn die Seite so in allen Browsern einheitlich und fehlerfrei dargestellt wird, spricht natürlich nichts gegen diesen Dokumenttyp - es gibt ja schließlich keinen Zwang, welcher Doctype zu verwenden ist.

Ich persönlich übergebe die (X)HTML-Dokumente grundsätzlich im Standardsmode - (X)HTML-Variante "Strict" -, um zu gewährleisten, dass die standardkonformen Browsern den W3C-Spezifikationen folgen, und die Seite in ihnen korrekt angezeigt wird. Und dort, wo der IE hinterher hinkt, bekommt er eben den entsprechenden "Bugfix" oder "Workaround" auf's Auge gedrückt - fertitsch :-)

Wobei dies doch mehr auf die älteren IE's (bis IE6) zutrifft, da die aktuellen Versionen sich den W3C-Spezifikationen bedeutend angenähert, und mit den anderen Browsern weitesgehend gleichgezogen haben.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück