Alternative zu Iframes Drucken E-Mail
Scripting-Tipps - CSS

Manchmal ist es nötig, auf seinen Seiten einen separat scrollenden Bereich zu erstellen. Sei es für Erklärungstexte oder was auch immer. Oftmals werden dafür Iframes eingesetzt. Doch Iframes haben auch nachteile, zum Beispiel was die Suchmaschinenfreundlichkeit angeht.
Daher kann man einen ähnlichen Effekt auch mit CSS erzielen, ohne dabei auf Iframes zurückgreifen zu müssen.

Beispiel:

#iframe {
    position: relative;
    height: 500px;
    width: 500px;
    overflow: auto;
    }


Der Text, der nun separat gescrollt werden soll, muss nur noch entsprechend in der HTML-Datei definiert werden.

Beispiel:

<div id="iframe">
  <p>Dies ist ein Beispieltext</p>
</div>


Erklärung:
Die im Beispiel genannte DIV-ID muss entweder im header der Webseite oder aber in einer separaten Stylesheet-Datei erstellt werden. Dabei wird ein Bereich von 500x500 Pixel erstellt. Alle Inhalte, die sich in diesem Bereich befinden, können separat vom Rest der Webseite gescrollt werden.
Durch das Attribut overflow: auto; wird sichergestellt, dass automatisch Scrollbalken angezeigt werden, sobald der Inhalt in diesem Bereich länger wird als definiert wurde.
 

Weitere Artikel: