Separating Main Page Content from Sidebar for Independent Scrolling

In the layout of our website, there is a narrow column on the left containing menu options, while the right side is occupied by the main page content. The challenge I am facing is figuring out how to ensure that the page content can scroll independently from the left column. One option would be to create a scrollable div for the main content, but this would require maintaining the height exactly equal to the browser window's height in order to prevent the appearance of the browser's main scrollbar. Any resizing using JavaScript might result in a lag as the window adjusts size, which could detract from the overall user experience. I am open to suggestions on a better way to structure the page so that the left column remains fixed as the main content scrolls. Additionally, if the left column becomes too long, it may also need to be scrollable. The desired layout can be viewed in the image at Page Layout http://www.softcircuits.com/Client/Layout.png. It illustrates the goal of having the main content scroll independently from the sidebar or header. Simply making it a scrollable <div> could lead to multiple adjacent scrollbars (one for the scrollable <div> and another for the main browser window) which is not ideal.

javascriptjqueryhtmlcsswebforms

Answer №1

To create a fixed left column that remains in place while the rest of the page scrolls, you can set its position to fixed. Here's an example:

.left-column {
  position: fixed;
}

You can see a demonstration here: http://jsfiddle.net/AbCDe/

If you want the left column to scroll independently within itself, you can achieve this by positioning it from the bottom as well:

.left-column {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

Check out the demo for this scrolling behavior here: http://jsfiddle.net/AbCDe/1/

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

Encountering a GraphQL error during the compilation process

I've been following along with this informative tutorial: https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/ After completing all the steps, I encountered a GraphQL compile error: GraphQL Error There was an error while compiling y ...

javascriptreactjsgraphqlgatsby

Integrating node.js into my HTML page

Forgive me for sounding like a newbie, but is there a simple way to integrate node.js into my HTML or perhaps include a Google API library? For example: <script>google.load(xxxx)</script> **or** <script src="xxxx"></script> ...

javascripthtmlnode.jsgoogle-api

Repeating the process of running a function multiple times

export default function MyQuestions() { const router = useRouter(); const [auth, setAuth] = useState(false); const checkAuth = async () => { const loggedInUsername = await getUsername(); if (router.query.username === loggedInUsername) re ...

javascriptreactjsfunctionnext.js

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...

javascriptjqueryangularjshtmlionic-framework

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

javascriptjqueryhtml

As you hover over the div, the content inside subtly shifts upwards and downwards

I am facing an issue with my movie list. When hovering over a movie, a border appears around it as expected. However, I also notice that at the same time, it seems like extra padding is being added to the 'top' and 'bottom', causing the ...

htmlcss

What's the best way to correct a word that is positioned at the bottom of a banner image?

https://i.sstatic.net/3gSoi.pngI am a newcomer to all of this. I have a banner image and I want to position a word at the bottom center of the banner. I've tried using padding, position, and text-align, but it's not responsive - when I widen the ...

cssbootstrap-5

Using Ajax to monitor an XML file every 5 seconds and refresh the data

I am currently using JavaScript to showcase XML data on an HTML page: $(document).ready(function () { $.ajax({ type: "GET", url: "xml/odds.xml", cache: false, dataType: "xml", success: function(xml) { ...

jqueryajaxxml

Error: Functionality cannot be achieved

Looking for assistance in resolving this issue. Currently, I am attempting to register a new user and need to verify if the username already exists or not. Below is the factory code used for this purpose: .factory('accountService', function($res ...

javascriptangularjs

Finding the minimum value in a list and the maximum value in JavaScript

My current JavaScript list consists of dollar coin values: let x = [1.0, 2.5, 5.0, 20.0, 50.0, 100.0, 500.0, 2000.0, 5000.0] My challenge is finding an equation in JavaScript that will allow me to use the smallest number of coins to reach the desired max ...

javascriptarrays

The C# method is receiving a null array through Ajax

When I retrieve an array in a loop and pass it through an ajax call to my C# method, I'm encountering a problem where only null values are being received in my parameter. The count of the array is coming through, but the actual data seems to be lost. ...

javascriptc#arraysjsonajax

Replace Font Awesome icon with a background image

Looking to replace a Font Awesome icon with a background image using only CSS. Current Setup: https://i.sstatic.net/tkPXz.jpg .btn.btn-default.bootstrap-touchspin-up:before { font-family: Fontawesome; content: "\f067"; font-size: 14px; } ...

htmlcssfont-awesome

I would like to style the input checkbox using CSS

Is there a way to style input checkboxes with CSS that will work on all browsers (Chrome, Firefox, IE 6, 7, and 8)? If jQuery is the only solution, please let me know. It needs to be compatible with all browsers. Can anyone provide guidance on how to ach ...

jqueryhtmlcssinputcheckbox

Navigating dropdown list items using the keyboard in TypeScript is a breeze

I've encountered a bug while working on my open-source project. The issue is with navigating the dropdown list items using the keyboard (arrow key/tab). I have implemented the keyboard-navigation logic, but I'm unsure of how to make it work corre ...

htmlreactjstypescriptecmascript-2016

Displaying a message when there are no results in Vue.js using transition-group and encountering the error message "children must be keyed

Utilizing vue.js, I crafted a small data filter tool that boasts sleek transitions for added flair. However, I encountered an issue with displaying a message when there are no results matching the current filters. Here's what I attempted: <transit ...

javascriptvue.jsvuejs2vue-component

Leveraging ASCII characters within the .htaccess file

I'm currently working on developing my own local network website and I'm interested in adding password protection to certain parts using .htaccess. However, the guide I've been following mentioned that they need to be saved with ASCII encodi ...

htmlapacheascii

What is the exclusion filter in AngularJS?

I am currently working on implementing a search box with angular in my project: <input type="text" typeahead="item.name for item in list | filter: $viewValue:comparator | orderBy: '+name'"/> As part of this functionality, I am looking to ...

javascripthtmlangularjsfilterangularjs-ng-repeat

What are the steps to execute a file on localhost using an HTML page?

Currently, I have an HTML file that leverages the Google Calendar API javascript to read the next event on my calendar. The functionality works flawlessly when manually inserting a specific URL in a browser address window, which triggers a GET request in a ...

javascriptpythonhtmllocalhost

Several submission choices available within a single form

My form is set up like this: <form action='../performSQL.php' method='post'> <input type='hidden' name='hidden_id' value='$id'> <input type='date' name='porteringsdato' va ...

phphtml

Determine the differences in the content of the body section of an HTML file using

I am in the process of creating a shell script that can track changes on a website and send me an email with the content of the change if any. To achieve this, I am using wget to download a copy of the HTML and then comparing it to the version saved from t ...

htmlshelldiff