Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

Empfohlene Antworten

Veröffentlicht

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>

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 ?

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

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;

      }

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).

verstehe ich nicht ganz.

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

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. :)

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.

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 ;)

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

  • 2 Monate später...


      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?

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

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.