What is the best way to set up a webpage so that the left side remains fixed while allowing the right side to scroll?

Currently, I am developing a blog and aiming to position the blog posts on the left side while having the admin panel on the right. Essentially, I want both user and developer interfaces to be fully functional on one page. The developer side should be scrollable while the user interface remains fixed.

Below is the CSS code:

.h-100-vh {
    height: 100vh !important;
    overflow-y: hidden;
}

.scroll-y {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.rounded-xxlg-top {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.rounded-xxlg-bottom {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.nav-tabs .nav-link.active {
    color: white !important;
    background-color: #007bff !important;
}

Here is a snippet of the HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Wicked Blog</title>
    <link rel="stylesheet" href="assets/bootstrap-4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>

<body>

    <div class="container-fluid" style="position: sticky;">
        <div class="row mt-3">
            <div class="col-md-8 blog-left">
                <div class="shadow-sm">
                    <div class="header py-3 bg-primary text-center rounded-xxlg">
                        <img src="assets/media/images/brand/logo/logoBW.png" width="140" alt="" class="img-fluid">
                        <h1 class="text-white mt-3">Welcome to <span>Wicked Blog</span></h1>
                    </div>
                    <main class="py-5">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p><!-- Placeholder text, shortened for brevity -->
                    </main>
                </div>
            </div>
            <div class="col-md-4 blog-right shadow-lg">

                <!-- Tab panes -->
                <div class="tab-content px-3 py-4">
                    <?php if(isset($_GET['avw']) && $_GET['avw'] == 'new-blog'): ?>
                    <div class="tab-pane active">
                        <form action="" method="post">
                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" class="form-control" placeholder="Enter Title">
                            </div>
                            <div class="form-group">
                                <label>Content</label>
                                <textarea name="content" class="form-control" cols="30" rows="5"></textarea>
                            </div>
                            <div class="form-group form-check">
                                <label>Category</label>
                                <select name="category" id="category" class="form-control form-select">
                                    <option value="">--Pick Category--</option>
                                    <option value="">option</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="">Cover Image</label>
                                <input type="file" name="coverImage" class="form-control form-control-file">
                            </div>
                            <div class="preview-box p-5 m-5 bg-dark">

                            </div>
                            <div class="text-center">
                                <button type="submit" name="saveBlog" class="btn btn-success">Save</button>
                                <button type="reset" class="btn btn-danger">Cancel</button>
                            </div>
                        </form>
                    </div>
                    <?php endif ?>

                </div>
            </div>
        </div>
    </div>
    </div>

</body>

</html>

I have attempted to set a fixed height for the entire page using the overflow-y property and even experimented with the position:fixed attribute, but unfortunately, the entire page remains scrollable.

Answer №1

Here's a desired layout:

.my-container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.my-container > div {
  overflow-y: auto;
}
<div class="my-container">
  <div class="container-fluid">
    Content for left column here...
  </div>
  <div class="container-fluid">
    Content for right column here...
  </div>
</div>

View the working example below:

.split-screen {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.split-screen>div {
  overflow-y: auto;
}
<link
  href="https://cdn.jsdelivr.net/npm/example/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<div class="split-screen">
  <div class="left-panel container-fluid">
    <p>
      Sample text for left panel.
    </p>
  </div>
  <div class="right-panel container-fluid">Sample content for right panel</div>
</div>

Each column will become scrollable when the content exceeds the height:

@media (min-width: 768px) {
  .split-screen {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .split-screen>div {
    overflow-y: auto;
  }
}
<link
  href="https://cdn.jsdelivr.net/npm/example/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<div class="split-screen">
  <div class="container-fluid">Content for right panel here</div>
  <div class="container-fluid">
    <p>
      Sample text for right panel.
    </p>
  </div>
</div>

Ensure to wrap the CSS within a media query for screens larger than 768px:

@media (min-width: 768px) { 
  /* CSS rules here... */
}

This will apply the split screen layout only on medium screens and above.

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

What is a method for capturing the value of a nested input element without requiring its ID to be

Currently, I am facing a challenge in selecting the value of an input box from a user-generated ordered list of text boxes and logging its value to the console. It seems like I cannot find a way to select the value of a child's child element when the ...

Fetch HTML content from a local file using Vue

I am currently searching for a method to import HTML content from a file located at /src/activities/0/2/content.html The specific numbers in the path are interchangeable variables. My goal is to achieve something along the lines of mounted(){ this ...

The background image is trapping my text and preventing it from moving forward

As a beginner developer embarking on my first web page project, I've encountered a challenge. The text I inserted into a flexbox refuses to align beneath the image. .title { text-align: center; width: 500px; margin-left: auto; margin-right: a ...

Turn off the feature of map scrolling on OpenStreetMaps

Is there a way to prevent mouse interactions and scrolling in an open maps iframe? I have already tried adding the attribute scrollwheel="false" to no avail. Are there any CSS methods to achieve this? <iframe id= "mapsource" scrollwheel="false" src="ht ...

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

HTML: Image not updating despite meta tag refresh

I am using the following HTML5 code to display an HTML page with an image (1.JPG). The setup is working correctly, but I am encountering an issue. The image at the specified path is supposed to be randomly replaced with a newer image within a certain tim ...

A guide on how to selectively blur and make the background transparent in jgrowl notifications without affecting the content

After some experimentation, I found that making the jGrowl notification background both transparent and blurry was not possible. When applying blur to the background, the content also became blurry, which is not the desired effect. If you want a transparen ...

Issue with Bootstrap 4.2 modal: Unable to edit input fields, button cannot be clicked, modal does not close

https://i.sstatic.net/vHnVG.png https://i.sstatic.net/MhU3f.png Utilizing Bootstrap 4.2.1, I have a modal that opens via a specific link: <a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false"> ...

Step-by-step Guide: Building a Nested Bootstrap Navigation Tabs Component on a Webpage

Within a page, I have integrated nested bootstrap navs components. The issue arises when clicking on "Nested Tab 2," which functions correctly, and then switching to "Nested Tab 1" where the tab content is not displaying properly. I am uncertain if there ...

Include an additional phase within the MUI stepper and customize the styling

I am in need of modifying the code below to suit my requirements: Firstly, I would like to change the design from the current one to this: https://i.stack.imgur.com/3RhsH.png The new design will look like this: https://i.stack.imgur.com/sGLwH.png Addi ...

Modifying colors with Jquery

Is it possible to use CSS within JQuery to gradually change the color of a div? Additionally, how can I incorporate a second function into my <div>? Below is the code. I would like the color to revert back to its original state when the mouseout ev ...

Mastering the art of customizing jQuery Mobile skins

Just landed a front end developer role at a prominent bank where I'll be focusing on the UI using jQuery Mobile. I'm looking for a comprehensive page that contains all the assets of jQuery Mobile to streamline the skinning process. Any leads? ...

Show specific content based on which button is selected in HTML

I am working on a project where I have three buttons in HTML - orders, products, and supplier. The goal is to display different content based on which button the user clicks: orders, products, or supplier information. function showData(parameter){ i ...

What is the best way to add a gradient effect to my image? (link)

All the details are provided in this JSFiddle. Apologies, I am unable to display the link here. It can be found in the comments section! I'm facing difficulty achieving a red gradient over the image.. ...

Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...

Images featuring a drop-down menu

I'm having trouble separating the two photos on this page. When I hover over one, the other also fades in. Additionally, the text box is overlapping the first photo. My goal is to have a total of 6 photos on the page, each with a dropdown list contain ...

Express is causing an issue with the AngularJS loading process

When I view the index.html file in a browser, everything works fine. However, when I try to run it on a local server using Express, it doesn't work as expected. Server.js const express = require('express'); const app = express(); app.get ...

Utilizing various z-index values for multiple background images in a single CSS class

My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue ...

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

Using Javascript's .replace() method to preserve HTML elements

This is a JavaScript function I wrote function replaceCharacters(text_input){ return text_input .replace(/O/g, 0) .replace(/I/g, 1) .replace(/o/g, 0) .replace(/i/g, 1) .replace(/t/g, 4) .replace(/d/g, 9) ...