Ensure one div scrolls independently while the other remains fixed using Bootstrap

I am currently in the process of constructing a web page with Bootstrap 4. The layout consists of two columns, each contained within individual divs. My requirement is for the content on the right side to be scrollable while the content on the left remains fixed. I have attempted to use 'overflow' property but unfortunately, it doesn't seem to be functioning as expected. Whenever I scroll down, the left side div scrolls along with it. In my setup, I have a main div with the class 'container-fluid', which houses another div with the class 'row'. Within this arrangement, my two divs are placed accordingly:

<body>
 <div class=container-fluid>
  <div class=row>
   <div class="col-md-3 pt-5 align-items-center back-color1 vh-100 overflow-hidden">
      <img>
      <p></p>
      <h3></h3>
      <div>
         (for nav-btns..)
         <p></p>
      </div>
   </div>
   <div class="col-md-9 back-color2 overflow-auto">
     <div class="vh-100">
      <h1></h1>
      <p></p>
      <a></a>
      <div> (space for img.) </div>
     </div>
     <div class="vh-100">
       (this div for other contents on the page. This has to come down)
     </div>
   </div>
  </div>
 </div>
</body>

The issue at hand seems to lie with the 'overflow' property, and I am currently investigating why it isn't behaving as intended.

Answer №1

To achieve the desired effect, consider making the position of the left div fixed.

Try including position-fixed in the class of your left div to see if that works for you.

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

Retrieving AJAX data in a Node.js environment

In my HTML application, I am utilizing AJAX to showcase the output on the same page after the submit button is clicked. Before submitting, I am able to retrieve the values passed in the HTML form using: app.use(express.bodyParser()); var reqBody = r ...

Utilizing the invoke() method within the each() function in Cypress to access the href attribute

I recently started using Cypress and I'm attempting to retrieve the href attribute for each div tag within a group by utilizing invoke(), however, it is resulting in an error. Could anyone provide guidance on the correct way to achieve this? cy.get(&a ...

Change the color of the navbar when scrolling using bootstrap and jquery

Using Bootstrap to design a navigation bar, I have two main goals: I want the navbar to change color when the page is scrolled down by 20%, and then revert back to its original color when scrolling back to the top. When the collapse featu ...

Is the Application Wizard failing to display the card's content on the second attempt?

Hey there, I'm currently using the bootstrap application wizard and encountering a problem. Whenever I try to load the wizard for the second time, the card doesn't initialize properly and the content disappears. Here's a snippet of my code: ...

Discovering how to create a line break within a text area using the $scope feature in Angular

I'm looking to incorporate a text area for chat input that is resizable. I would like to have some pre-filled texts in it, such as: Hi Jhon, Thanks for contacting us.... I want the text to appear on a new line after the existing content in the textar ...

What is the best way to apply box shadow to a particular region using CSS?

I am looking to add a box shadow using CSS, but I only want it in a certain area of the box. https://i.sstatic.net/dcFZu.png In the screenshot above, you can see that I have a blue header on my website. I would like to add a shadow to this header, specifi ...

What Browsers are Compatible with Stream Segmentation?

Apple has developed a specification for using .m3u as a playlist file of .ts video segments. While this is known to work on iOS devices and OSX Safari, is this format supported by any other web browsers? If not, are there alternative methods available for ...

The geolocation navigator is not defined

Currently, I am in the process of developing an AngularJS application that I plan to convert into a mobile app using Cordova. My goal is to incorporate Cordova's geolocation plugin into the app, but I have encountered an issue where it returns undefin ...

Using a personalized domain with a Cloud Function to send a POST request

While I may not be the most experienced with Node.js, I am quickly learning and have a good grasp of JavaScript. Currently, I'm working on a project where I am utilizing Cloud Functions to build an API. My goal is to use a custom domain to access this ...

Dynamic JavaScript button control based on time

I am currently working on an app and my goal is to have a feature where the user clicks a button, it will then disappear and only reappear after 24 hours. Here's my progress so far. <div class="buttons"> <p><button onclick="hide(); ...

Incomplete data was retrieved from the localStorage

I am currently in the process of developing a mobile application using Phonegap version 1.4.1. I have encountered an issue on iOS (running on version 5.1) where the app fails to load all data from localStorage. Upon first use of the app, I set a flag in l ...

Building a contact form in Angular and sending emails with Nodemailer

Currently, I am in the process of setting up a contact form for my website. Since I am utilizing a MEAN stack, it made sense to incorporate the nodemailer module for sending emails. In order to handle this functionality, I have established an endpoint &ap ...

Passing an unpredictable amount of parameters to react router in a dynamic way

Within my React application, users have the ability to create both folders and files. A folder can contain an indefinite number of subfolders within it. Here is an example structure: Folder-1 |_Folder-1-1 |_Folder-1-2 |_Folder-1-2-1 |_Folder- ...

Update the 'selected' text with the JQuery fnGetColumnData Plugin

I have implemented the fnGetColumnData plugin for filtering data tables, and it is functioning correctly. However, the dropdowns that appear are labeled "Select," and there are a total of five dropdowns. I would like to know how to change the text "Select" ...

Tips for transforming intricate JavaScript arrays into a unified array and iterating through to create a table

I need help combining two arrays that contain objects and reassigning the values in a standard format. Can anyone provide some guidance? Thank you. Here is my current situation: array1 = [{Apple: Ken, Orange: Mary, Melon: Tina, Strawberry: Jessica, Mango ...

Best practice for showcasing the output of an array in Javascript

My variables are defined in an array like this: const nbActions = 13; const sdgValues = ['1', '2', '5', '6', '3', '0', '2', '0', '0', '6', '0', & ...

Expanding the Reach of HTML Documents

I'm currently working on a project using HTML files (no JSP or any other client-side technology) and utilizing JQuery for scripting. Within my tables, columns, and fields, I have a lot of text content. How can I implement internationalization on my we ...

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

Searching with Neo4j, Java and the Angular library for accurate

When my web application is opened, it displays a form where users can input a list of comma-separated usernames. The application then queries the neo4j database to fetch information for each username. I am interested in implementing autocomplete functiona ...