"Implementing a fixed header and footer with a scrolling content area within a parent div that has a fixed position for

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to construct an IFrame using URL parameters?

Looking to implement an iframe that displays a page provided as a parameter in the URL using ASP.NET MVC4. Here's the approach I have in mind: Updated the code but it still doesn't seem right to me. <?php if(!isset($_GET['link'] ...

Has any of my predecessors been hidden from view?

How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...

Exit PopUp malfunctions and fails to function correctly

Hey everyone, I'm having an issue with my exit PopUp. It was working fine initially, but now it doesn't appear again when I scroll down the site page. Can someone please help me figure out what's going wrong? Sorry for any confusion, and tha ...

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...

Arranging information within the Ngb-Accordion

Welcome to the code snippet showcasing how to create an accordion in Angular: <ngb-accordion [closeOthers]="false" activeIds="0"> <ng-container class="card" *ngFor="let post of Posts"> <ngb-panel title="{{post.title}} - ...

The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

I have been struggling to prevent my modal box from disappearing, despite trying various solutions found online. How can I ensure that it stays visible? Here is the code in question: <html> <head> <title> Test Slides </titl ...

What is the best way to create a 3x3 grid layout with 9 input text boxes that do not have a double border thickness?

I am having trouble creating an input square with 3 rows and 3 columns. The borders between each two input boxes are overlapping, resulting in a double thickness border. To see this issue in action, you can run the provided html. How can I fix this so that ...

Does anyone else have a peculiar problem with css width?

Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...

Changing the color of error messages when validating input with jQuery Validation and Bootstrap 5

Modified: I have implemented jquery-validation and bootstrap 5 to handle form validation and display error messages. Strangely, when I attempt to log in without entering an email and password, the input fields turn red (indicating an error) for both the em ...

Google Maps and certain styles may require the browser to be refreshed multiple times

Something strange is happening with the Google Maps implementation on my website. Occasionally, when I first load the page, the map doesn't show up but appears after a refresh. Sometimes, I have to refresh multiple times before it displays properly. A ...

The event tooltip in fullcalendar does not show up as expected

Within my Laravel 5.8 / Bootstrap v4.1.2 / jQuery jQuery v3.3.1 fullcalendar v4.3.1 application, I am attempting to incorporate tooltips for events in the fullcalendar plugin. To achieve this, I referred to a specific example provided here: Sample Example ...

Parsing HTML files with Perl to extract XML data

Can an XML output be generated from a webpage using web::scraper in Perl? Here is an example of HTML taken from a URL: > <table class="reference"> > <tr> > <th width="23%" align="left">Property</th> > ...

Enhancing the style of child elements in jQuery using CSS

My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window. Below is the jQuery code: $(document).ready(fun ...

Showcasing images in Flask

Hello everyone, I am encountering an issue with displaying images in my HTML file. Currently, I am using Flask within Visual Studio Code and here is the code snippet that I want to display: <img src="/templates/WANG_CHONG_st_1.png" width=" ...

Tips for positioning and styling submenu on dropdown using CSS

I am facing an issue with my navigation menu in the design. The sub menu is not displaying when hovered. Is there a solution to fix this problem? Could it be due to missing CSS styles? nav ul {list-style-type: none; overflow: hidden; background: #000; p ...

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

<input type="range" name="rangeInput" min="100000" max="750000" onchange="updateTextInput(this.value);"> Displayed above is the slider code that provides a value output below. <div id="sliderValue"> <p>Max Value £</p> <input t ...

Box2dweb: Interaction Point of Collision

Currently working with box2dweb for a game development project. Need assistance in determining the contact point between a "Circle" and "Box". Aware that this can be achieved through b2ContactListener and the Post-Solve Event. Seeking guidance on impleme ...

Merging columns in Bootstrap 4 grid system

I have been working on creating a Bootstrap grid with the following structure: .facevalue { background: #ffffff61; font-family: Dubai; font-size: 18px; font-weight: 400; line-height: 30px; padding: 0 30px; border: 1px solid #e9e9e9; ma ...

Tips on targeting a node that is dynamically generated within a function and styling it externally

Is there a way to style or change divs created within a function, but without making the change within that same function? Since variables are in the local scope of functions, it can be challenging to access these created divs for future styling or changes ...

Traversing through JSON objects in Angular 2

I am currently facing an issue while trying to iterate through a JSON object. Below is the sample JSON data: floors.ts this.floors= [ { floorName: "floor 1", result: [ { resFloor: "1", ...