Problem mit Scrollbalken fast gelöst, (neues Verständnis)Problem

[Enrico]

Hallo,

bitte entschuldigt, dass ich zu meiner Frage https://forum.selfhtml.org/?t=175323&m=1152301 ein neues Posting
eröffnet habe, aber ich bin ein gutes Stück weitergekommen und mein jetziges Verständis-/Umsetzungsproblem hat nicht
mehr zwangsläufig mit meiner damaligen Frage zu tun.

Möglicherweise könnte dies nicht so gesehen werden, deshalb meine Entschuldigung vorab.

Mein Problem war ja, dass ich herausfinden musste, ob ein vertikaler Scrollbalken angezeigt wird oder nicht.

Mit folgenden Definitionen und Abfragen bekomme ich auf jeden Fall schon mal die richtigen Werte ausgegeben:

Das heisst, ich habe das Problem gelöst, wie ich herausfinde, ob Scrollbalken angezeigt werden oder nicht:

<div id="Anzeigebereich" class="Normaler_Abstand">...</div>

div_Hoehe    = window.document.getElementById ("Anzeigebereich").clientHeight;
     Seitenlaenge = window.document.getElementById ("Anzeigebereich").scrollHeight;

Die Definitionen zur css-Klasse "Normaler_Abstand" sehen wie folgt aus:

div.Normaler_Abstand
     {
        background: blue;
        bottom:     22px;
        left:       194px;
        overflow:   auto;
        position:   absolute;
        right:      22px;
        top:        22px;
     }

Mein Vorhaben war ja (und ist es aktuell immer noch), einen Abstand zu schaffen zwischen dem Inhalt des div "Anzeigebereich"
und dem vertikalen Scrollbalken zu schaffen, sobald die Seitenlänge größer als die div-Höhe ist.

Dies will ich per Zuweisung einer neuen Klasse "Zusaetzlicher_Abstand" bewerkstelligen, die die Standard-Definitionen der
Klasse "Normaler_Abstand" enthält und eine "margin-right"-Anweisung:

div.Normaler_Abstand,
     div.Zusaetzlicher_Abstand
     {
        background:        blue;
        bottom:            22px;
        left:              194px;
        overflow:          auto;
        position:          absolute;
        right:             22px;
        top:               22px;
     }

div.Zusaetzlicher_Abstand
     {
        margin-right:      7px;
     }

Die Zuweisung der neuen Klasse funktioniert auch:

if (Seitenlaenge > div_Hoehe)
     {
        var Anzeigebereich = window.document.getElementById ("Anzeigebereich");
        Anzeigebereich.className   = "Zusaetzlicher_Abstand";
     }

Allerdings habe ich hier das Problem, dass ich keinen zusätzlichen Abstand vom Inhalt des div "Anzeigebereich" zum Scrollbalken
bekomme, sondern einen zusätzlichen Abstand des gesamten div zum rechten Bildschirmrand.

Ich habe mir nun gedacht, dieses Problem zu umgehen, in dem ich den div "Anzeigebereich" in einen umhüllenden div "Container_Anzeigebereich"
packe mit folgenden neuen Definitionen:

<div id="Container_Anzeigebereich">
        <div id="Anzeigebereich" class="Normaler_Abstand">...</div>
     </div>

div.Container_Anzeigebereich
     {
        background:        blue;
        bottom:            22px;
        left:              194px;
        overflow:          auto;
        position:          absolute;
        right:             22px;
        top:               22px;
     }

div.Normaler_Abstand,
     div.Zusaetzlicher_Abstand
     {
        background:        red;
        width:             100%;
        height:            100%;
     }

div.Zusaetzlicher_Abstand
     {
        margin-right:      7px;
     }

Den javascript-Code zur Abfrage der Dimensionen muß ich natürlich auch anpassen:

var div_Hoehe    = window.document.getElementById ("Container_Anzeigebereich").clientHeight;
     var Seitenlaenge = window.document.getElementById ("Anzeigebereich").scrollHeight;

Nun habe ich aber das Problem, dass beide Variablen "div_Hoehe" und "Seitenlaenge" den gleichen Wert haben, nämlich den der div_Hoehe.

Und das versteh ich nicht.

Um mein Vorhaben abschliessen zu können, muß ich jetzt nur noch den (Denk)Fehler in meinem Code finden, dann müsste das Endergebnis so
sein, dass der umhüllende div "Container_Anzeigebereich" seine standardgemässen Dimensionen hat, wie definiert, bei größerer Seitenlänge
als div-Höhe der Inhalt des div "Anzeigebereich" um 7px vom vertikalen Scrollbalken versetzt ausgegeben wird.

Ich hoffe, Ihr könnt mir bei diesem (kleinen) Schritt wieder behilflich sein.

Vielen Dank im Voraus.

Gruß
Enrico

[Enrico]

Hallo,

hab's gelöst, ich muß einfach nur "padding-right" statt "margin-right" verwenden,
zu dumm, dass ich da nicht eher drauf gekommen bin :-)

Gruß
Enrico