Div-Overflow:auto + Höhe=100% ?

slomoman · 15. November 2005

Ich will meine Seite in 3 übereinanderliegende Bereiche teilen, von denen die oberen zwei eine Feste Größe haben und der untere unterschiedlich hoch sein kann.

Wenn Scrollbars nötig sind, sollen die oberen 2 Bereiche stehen bleiben.

Da ich keine FRAMES verwenden will, muss ich es mit DIV style="overflow:auto;" machen, oder?

Ich habe eine Lösung gefunden, die mit dem IE geht, aber nicht mit NN. Hat jemand eine Browserübergreifende Lösug.

Für den, den's interessiert, hier meine bisherige Lösung:


<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">

  <tr>

    <td width="100%" height="45" valign="top">zeile 1</tr>

  <tr>

    <td width="100%" height="45" valign="top">zeile 2<tr>  

     <td width="100%" valign="top"> 

     <div style="height:100%;overflow:auto;">

       Hier der dynamisch hohe Bereich:

       1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

       1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>Ende

     </div>

  </tr>

</table>

Aiun · 15. November 2005

Variante 1: Position: fixed

Problem: kann IE nicht richtig

Variante 2: Div mit overflow: auto;

Problem:

geht nur bei position: absolute/fixed

dann würde höhe 100% bedeuten, 100% vom Dokument, nicht vom 'verbleibenen' Fenster

Lösung: Javascript (bei onload und onresize die soll-größe des Divs ermitteln)

Deine Variante ... hmmm mal ausprobieren.

Welchen HTML-Standard willst du benutzen ? (oder Quirksmode ?)

NN welcher Version ?

slomoman · 17. November 2005

Variante 1: Position: fixed
Problem: kann IE nicht richtig

Kann man mit position:fixed auch irgendwie eine scrollbar realisieren?

Variante 2: Div mit overflow: auto;
Problem:
geht nur bei position: absolute/fixed
dann würde höhe 100% bedeuten, 100% vom Dokument, nicht vom 'verbleibenen' Fenster
Lösung: Javascript (bei onload und onresize die soll-größe des Divs ermitteln)

Also bleibt insgesamt nur eine Variante mit Javascript, bei der man die aktuelle Größe des Fensters ermitteln und für die Höhe weiterverarbeitet?

Deine Variante ... hmmm mal ausprobieren.

Welchen HTML-Standard willst du benutzen ? (oder Quirksmode ?)

egal.

NN welcher Version ?

NN 7.0

Aiun · 18. November 2005

naja, du solltest dir schon festlegen welchen HTML-Standard. es kann sein das dein konstrukt in xhtml nicht funktioniert, in 4.01 trans. aber schon.

Wenn du gar kein Standard angibst, dann ist klar das der Quirksmode browserabhängig abweichungen hat.

es gibt eine Art 'Patch' (Javascript) der dem IE ein position: fixed beibringt. Aber bisher habe ich gesehen, es ist angenehmer die Fenstergröße mit JS zu ermitteln und dann die Div-Layer zu zu weisen.

Hierbei aufpassen, Browser haben verschiedene Befehle für die fenstergröße.

Javascript:


      var x,y;

      if (self.innerHeight) // all except Explorer

      {

      	x = self.innerWidth;

      	y = self.innerHeight;

      }

      else if (document.documentElement && document.documentElement.clientHeight)

      	// Explorer 6 Strict Mode

      {

      	x = document.documentElement.clientWidth;

      	y = document.documentElement.clientHeight;

      }

      else if (document.body) // other Explorers

      {

      	x = document.body.clientWidth;

      	y = document.body.clientHeight;

      }

Gregormo · 22. November 2005

es kann sein das dein konstrukt in xhtml nicht funktioniert, in 4.01 trans. aber schon.

In dem Fall kann man body und html aber auch eine Höhe von 100% geben. Dann geht das (mit margin/padding aufpassen).

slomoman · 22. November 2005

verstehe ich nicht ganz.

ich soll dem <html> und <body> Tag die Höhe 100% geben?

Gregormo · 22. November 2005

In XHTML sind die beiden Elemente immer nur so hoch wie nötig. Wenn du Elementen darin die Höhe 100% gibst, sind die also nicht so hoch wie das Browserfenster, sondern nur so klein wie der body bzw. html. Deshalb musst du erst html auf 100% Höhe setzen und dann body.

geloescht_JesterDay · 23. November 2005

Deshalb musst du erst html auf 100% Höhe setzen und dann body.

Ja, aber wenn du dann die Seite scrollst, sieht das nicht mehr so schön aus probers einfach mal (also gerade mit Hintergrundbild o.ä.) 100% Höhe (vom Browserfenster) ist in XHTML nicht vorgesehen.

Gregormo · 23. November 2005

Naja, wenn man ein Hintergrundbild hat ist das nicht so gut

Gäbe es den IE nicht, könnte man einfach min-height:100% nehmen. Aber das ist ja leider Wunschdenken

tallman · 23. November 2005

Meine Erfahrungen sagen mir, dass man einzelnen Zellen eine festen Größe zuordnen kann. Sobald der Inhalt jedoch größer als die Vorgaben sind, wachsen die Zellen mit! Probleme tretten einzig und alleine bei Hintergrundbildern auf.

Habs ebend nochmal mit dem IE und Firefox getestet. ^^

mfg

slomoman · 20. Februar 2006


      var x,y;

      if (self.innerHeight) // all except Explorer

      {

      	x = self.innerWidth;

      	y = self.innerHeight;

      }

      else if (document.documentElement && document.documentElement.clientHeight)

      	// Explorer 6 Strict Mode

      {

      	x = document.documentElement.clientWidth;

      	y = document.documentElement.clientHeight;

      }

      else if (document.body) // other Explorers

      {

      	x = document.body.clientWidth;

      	y = document.body.clientHeight;

      }

Nochmal eine Nachfrage zu dem hilfreichen Script, mit dem man die aktuelle Höhe des nutzbaren Bereichs auf dem Bildschirm ermitteln kann.

Meine Seite wird von einer anderen Seite in einem IFRAME angezeigt, das eine bestimmte Höhe hat.

clientHeight ermittelt nur die Höhe des gesamten Fensters. Gibt es auch ne Möglichkeit, die Höhe meiner Seite in dem IFRAME, d.h. also die Höhe des IFRAMES selber zu ermitteln?

Aiun · 21. Februar 2006

versuchs mal mit varianten von parent.height, parent.document.height unsw.

soweit ich mich erinnere ist das übergelagerte Frame über parent zu erreichen, bin aber so aus dem Strehgreif nicht sicher

Anmelden

Div-Overflow:auto + Höhe=100% ?

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte