Scrollbalken mit Objekt style

[XaraX]

Hallo Enrico,

<div class="Container">
  <div class="Inhalt">
    ... Seiteninhalt ...
  </div>
</div>

.Container {position:relative;width:100%;height:100%}
.Inhalt    {position:absolute;width:100%;height:100%;overflow:scroll}

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
als ich das gesehen habe, drenkte sich unweigerlich die Frage auf, welchen Sinn dieses Construkt hat. Weder die Klasse Container, noch die Klasse Inhalt haben weitergehende Angaben der Positionierung wie top oder left. In diesem Zusammenhang wäre eine kurze Begründung, warum Du mit position arbeitest und formatierungsähnlich zwei DIVs in einander verschachtelst, wünschenswert.

Wenn ich nun einen Text habe, der länger als der zur Verfügung stehende Bereich ist, dann wird ein vertikaler Scrollbalken angezeigt (was ja auch beabsichtigt ist).

Bei overflow:scroll sollte immer ein Scrolbalken angezeigt werden, der erst bei Überschreitung der Dimension von .Inhalt sinn ergibt, daher denke auch über overflow:auto nach.

Was mir allerdings nicht gefällt, ist, dass der Text keinen Abstand zum Scrollbalken hat und das ganze dann ziemlich unschön aussieht.

Beabsichtigt wäre, dass der Text 14px Abstand zum Scrollbalken hat, WENN der Text länger als der Anzeigebereich ist, ansonsten soll sich der Inhalt zu 100% über den zur Verfügung stehende Bereich erstrecken.

Es gibt zwar eine Möglichkeit, dies mit JavaScript hinzubiegen, jedoch sei Dir davon abgeraten. Stattdessen würde ich Dir empfehlen die 14px Abstand mit padding-right anzulegen und den damit verbundenen Platzverlust hinzunehmen:

<td><div id="Container">
 #Text
</div></td>

#Container {width:100%;height:100%;padding-right:14px;overflow:auto}

Sollte Dir das nicht hinnehmbar erscheinen, mußt Du dennnoch diese Angaben für den Falle deaktivierten JavaScripts notieren. Diese werden dann per onLoad durch eine Funktion (im Bsp. teste() ) im Fall, daß der Inhalt von #Container kleiner als der vorgegebene Platz ist, herausgenommen:

var a=new Array();
a[0]="Container";
// usw.

function setze_um()
   {
   for(i=0;a[i];i++)
      {
      if(document.getElementById(a[i]).offsetHeight>b[i])
         {
         document.getElementById(a[i]).style.overflow='auto';
         document.getElementById(a[i]).style.paddingRight='14px';
         document.getElementById(a[i]).style.height=b[i] +'px';
         }
      }
   }

function teste()
   {
   b=new Array();
   for(i=0;a[i];i++)
      {
      b[i]=document.getElementById(a[i]).parentNode.offsetHeight;
      document.getElementById(a[i]).style.height='';
      document.getElementById(a[i]).style.paddingRight='';
      }
   setze_um();
   }

IMHO ist das für den eigentlich erwünschten Zweck eine Spatzenkanone.

Gruß aus Berlin!
eddi