Scrolling innerhalb dynamischem Rahmen

[WIK-Lars]

Hallo,

ich habe gemäß diesem Tutorial ( http://www.tutorials.de/forum/css/267846-background-image-rahmen-mit-div.html ) einen dynamischen Rahmen für meinen Content gebaut.
Nun soll sich der Rahmen so verhalten, dass er ab einer gewissen Größe nicht mehr größer wird. Er soll also immer als ganzer Rahmen auf dem Bildschirm zu sehen sein, ohne seitlich scrollen zu müssen. Stattdessen soll der Inhalt innerhalb des Rahmens gesrollt werden, wenn der Inhalt länger ist, als der Rahmen an Platz zur Verfügung stellt.
Wie krieg ich jetzt eine Scrollbar in so einen Rahmen?

 

[Maik]

Hi,

mit min-height lässt sich eine Mindesthöhe, und mit max-height eine Maximalhöhe für die Box .inhalt festlegen. Mit overflow:auto wird dafür gesorgt, dass sich der Inhalt scrollen lässt, wenn er die Maximalhöhe überschreitet.

Diese beiden CSS-Eigenschaften werden von allen modernen Browsern (Firefox, IE7, Opera, usw.) unterstützt.

 

[WIK-Lars]

Ok, I did.

Jetzt hätte ich noch eine Frage und ein Problemchen:

1. Kann ich die Höhe des Rahmens auch dynamisch begrenzen? Also, dass sich der Rahmen mit dem Content - sobald dieser mehr Inhalt hat, als auf die Bildschirmanzeige passt - immer sich von oben nach unten über die gesamte Website erstreckt. Eben so in der Art: height: 65%; --> hab's versucht, hat aber nicht funktioniert.

2. Die Scrollbar legt sich zur Zeit direkt über den rechten Rahmen. Mein Rahmen besteht jetzt also sichtbar oben, unten und links aus den zusammengesetzten Verläufen und rechts aus der Scrollbar.

 

[Maik]

Hi,

wenn du es mit einer prozentualen Höhenangabe erfolglos versucht hast, wird es auch nicht funktionieren, und wie ich eben überprüft habe, funktioniert's in den modernen Browsern auch nur mit einer fixen Einheit, wie z.B. "px".

Den Scrollbalken kannst weiter einrücken, indem du im DIV .inhalt eine weitere Box .scroll einbettest, und folgendes Stylesheet anwendest:

div.inhalt {
      padding:30px;
      }
div.scroll {
      min-height:200px;
      max-height:500px;
      overflow:auto;
      }