Jan: Platzreservierung für überlaufende Container?

Hallo,

bei der Arbeit mit positionierten DIVs und Javascript bin ich auf einen seltsamen Bug gestossen. Normalerweise wird der Inhalt eines auf overflow:hidden gesetzten DIV im MSIE, NS und Mozilla korrekt angezeigt, auch in verschachtelten Kombinationen. Das folgende Beispiel funktioniert jedoch nur im MSIE wie gewünscht (ob korrekt sei dahingestellt):

<div style="position: absolute; width: 300px; height: 200px; overflow: hidden;">
<div style="position: absolute; overflow: hidden;">
  // Content mit einer Höhe von 800px
</div>
</div>

Im MSIE wird ein DIV mit einer Höhe von 200px erzeugt, indem die oberen 200px des zweiten DIV angezeigt werden. In Netscape 6+ und Mozilla sieht das Ergebnis auf den ersten Blick gleich aus, allerdings reservieren beide die übrigen 600px als Platz auf der Seite. Das ist zwar nicht sichtbar, erzeugt aber einen Scrollbalken, wenn die Seite kleiner ist. Gerade bei einem noch grösseren Content ist es für den User ziemlich irreführend, wenn die Seite einen riesigen Scrollbalken bietet, sich dort aber nichts (Sichtbares) befindet. Den Scrollbalken abschalten bringt mir nichts, da die Seite aufgrund ihres normalen Contents schon zu scrollen sein muss, nur halt nicht soweit. Hat jemand einen Lösungsvorschlag?

Danke
Jan

  1. Hi Jan,

    Im MSIE wird ein DIV mit einer Höhe von 200px erzeugt, indem die oberen 200px des zweiten DIV angezeigt werden. In Netscape 6+ und Mozilla sieht das Ergebnis auf den ersten Blick gleich aus, allerdings reservieren beide die übrigen 600px als Platz auf der Seite. Das ist zwar nicht sichtbar, erzeugt aber einen Scrollbalken, wenn die Seite kleiner ist. Gerade bei einem noch grösseren Content ist es für den User ziemlich irreführend, wenn die Seite einen riesigen Scrollbalken bietet, sich dort aber nichts (Sichtbares) befindet. Den Scrollbalken abschalten bringt mir nichts, da die Seite aufgrund ihres normalen Contents schon zu scrollen sein muss, nur halt nicht soweit. Hat jemand einen Lösungsvorschlag?

    max-height:

    Fabian

    1. moin,

      Hat jemand einen Lösungsvorschlag?
      max-height:

      ist wohl keine richtige lösung, da sie leider nicht von allen browsern interpretiert wird.

      FaB

      1. Hi Franka,

        max-height:
        ist wohl keine richtige lösung, da sie leider nicht von allen browsern interpretiert wird.

        "richtig" ist immer relativ. Der eine UA, der max-width nicht korrekt interpretiert interpretiert aber das von Jan genannte Konstrukt "richtig", also dürfte _das_ kein Problem sein - der vom ihm geäußerte Einwand schon eher.

        Fabian

    2. Im MSIE wird ein DIV mit einer Höhe von 200px erzeugt, indem die oberen 200px des zweiten DIV angezeigt werden. In Netscape 6+ und Mozilla sieht das Ergebnis auf den ersten Blick gleich aus, allerdings reservieren beide die übrigen 600px als Platz auf der Seite. Das ist zwar nicht sichtbar, erzeugt aber einen Scrollbalken, wenn die Seite kleiner ist. Gerade bei einem noch grösseren Content ist es für den User ziemlich irreführend, wenn die Seite einen riesigen Scrollbalken bietet, sich dort aber nichts (Sichtbares) befindet. Den Scrollbalken abschalten bringt mir nichts, da die Seite aufgrund ihres normalen Contents schon zu scrollen sein muss, nur halt nicht soweit. Hat jemand einen Lösungsvorschlag?
      max-height:

      Ok, aber dann wird der überlaufende Content komplett gestrichen, existiert also nicht mehr und ist auch per JavaScript nicht mehr erreichbar. Für mein Script benötige ich aber diese "versteckten" Daten.

      Grüsse
      Jan

      1. Hi Jan,

        Ok, aber dann wird der überlaufende Content komplett gestrichen, existiert also nicht mehr und ist auch per JavaScript nicht mehr erreichbar.

        Warum denn das?

        Für mein Script benötige ich aber diese "versteckten" Daten.

        Die Daten sinbd doch "da" - bloß unter Umständen nicht sichtbar!?

        Fabian

        1. Ok, aber dann wird der überlaufende Content komplett gestrichen, existiert also nicht mehr und ist auch per JavaScript nicht mehr erreichbar.
          Für mein Script benötige ich aber diese "versteckten" Daten.
          Die Daten sinbd doch "da" - bloß unter Umständen nicht sichtbar!?

          Hallo Fabian,

          da habe ich mich nicht ganz korrekt ausgedrückt, die Daten mögen noch existieren, aber ohne height oder max-height - Angabe liegt im ersten DIV ein zweites DIV mit einer vollen Grösse, das man anhand der CSS-Angabe top und left beliebig im ersten DIV hin und her schieben kann. Die Möglichkeit habe ich mit einer height Angabe im zweiten DIV nicht mehr. Hast du eine Idee dazu?

          Grüsse
          Jan

          1. Hi Jan,

            da habe ich mich nicht ganz korrekt ausgedrückt, die Daten mögen noch existieren, aber ohne height oder max-height - Angabe liegt im ersten DIV ein zweites DIV mit einer vollen Grösse, das man anhand der CSS-Angabe top und left beliebig im ersten DIV hin und her schieben kann. Die Möglichkeit habe ich mit einer height Angabe im zweiten DIV nicht mehr. Hast du eine Idee dazu?

            Nicht wirklich, mir fallen spontan clip: und display:none ein, aber die dürften dir wohl beide nichts nützen, da der Gecko entweder _alles_ versteckt, oder aber wieder Platz freihält. Ist das ganze nicht vielleicht anders konstruierbar?

            Fabian