Bootstrap 4 - blokowanie przewijania wybranych kolumn

Question

Hej, mam następujący problem.

Moja strona składa się z nagłówka, stopki, paska bocznego i panelu zawartości. Wiem, że mogę ustawić "przyklejanie" stopki i nagłówka przez nadanie klasy sticky-top oraz fixed-bottom, ale pomimo moich prób nie mogę sprawić, aby zawartość panelu bocznego nie przewijała się wraz ze stroną - przewijać się powinna tylko zawartość główna (id=content). Szukałem rozwiązania bootstrapowego, ale nie znalazłem nic, co by zadziałało.

Fragment kodu:

<div class="container-fluid">

<div class="row sticky-top" id="topbar">
<div class="col-11">
Nagłówek
</div>
<div class="col-1">
Nagłówek2
</div>
</div>

<div class="row">
<nav class="col-1" id="sidebar">
sidebar
</nav>
<div class="col-11" id="content">
zawartość (tylko to ma się przewijać)
</div>
</div>

<footer id="footer" class="row fixed-bottom">
<div class="col-12">
Stopka
</div>
</footer>

</div>

 

Answer 1

Możesz zrobić to następująco. Zakodować stałą witrynę, a dla #content nadać max-hight i wtedy będziesz miał overflow- dla tego diva. Możesz też nadać position fixed na wszystkie elementy po za #content. Nadaj klasę dla #content i styluj po klasie, a nie po id.