Scrollbarer Content hidden vor Fensterrand

[AzRaIL]

Nabend,

an einem Projekt an dem ich arbeite gibt es einen Content Bereich mit viel Inhalt sodass mit overflow: auto gescrollt werden muss.

Struktur sieht so aus:

<div id="alles" style="overflow:auto;">
     <div id="inhalt">viel Inhalt</div>
</div>

Tut auch was es soll. Jedoch möchte ich nun dass der Content von #inhalt nicht bis zum Fensterende/anfang sichtbar ist sondern schon 100px vorher verschwindet (vom oberen rand aus).

Habe es mit

#inhalt {margin-top:100px; overflow:hidden;}

versucht, das ging nicht.

Hab es auch mit einem zweiten div um #inhalt drumherum probiert dem ich eine Höhe von 100px gegeben habe und ebenfalls overflow:hidden; das ging auch nicht

Langsam bin ich am ende mit meinen Kentnissen. Woran haperts?

 

[threadi]

Versuchs mal mit

#inhalt { height: calc(100% - 100px; }

Alternativ: gib dem #alles ein padding-bottom.

 

[AzRaIL]

Hab es nun gelöst indem ich dem #alles margin-top:100px; gegeben habe und overflow:auto;
klappt auch soweit, jedoch hat der Scrollbalken nun logischerweise auch 100px Abstand nach oben. Sieht nicht so toll aus. Aber immerhin verschwindet der Content nun früher.
Gibt es eine möglichkeit den Scrollbalken zu selektieren? Hab an sowas wie top: -100px; gedacht oder top:0px; und position: absolute; oder ähnliches.
Oder evtl. auszublenden?

 

[threadi]

Scrollbalken kann man mit

overflow: hidden;

bei dem Element, welches die Scrollbar erzeugt, unterdrücken.