I'm seeking assistance with some CSS tasks. Specifically, I need to maintain the same functionality in responsive view when utilizing a fixed position in the parent div (Bootstrap 5 is in use).
(the main focus of this project is on fullscreen view of the body).
Here's an example of what I'm trying to achieve. https://i.sstatic.net/svH64.png
And this is what I desire in the device viewpoint. https://i.sstatic.net/JGGjP.png
<div class="position-fixed bg-dark bottom-0 top-0 end-0 start-0">
<div class="row">
<div class="col-sm-8">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
<div class="col-sm-4">
<div class="position-absolute top-0" style="height:50px;">header</div>
<div class="position-absolute h-100">
<div class="overflow-auto h-100">
scrolling contentscrolling contentscrolling contentscrolling content (trimmed for brevity)
</div>
</div>
<div class="position-absolute bottom-0" style="height:50px;">footer</div>
</div>
</div>
</div>