A reliable cross-browser solution for CSS sticky positioning

I designed a layout with 1 header and 3 vertical panels. The challenge is to ensure that all the panels can expand or contract horizontally to fill up 100% of the page width collectively, while also taking up 100% of the vertical space below the header (which adjusts automatically in height).

Each panel should be scrollable individually without affecting the overall page scroll or disrupting the position of the other panels.

https://i.sstatic.net/eMOF5.jpg https://i.sstatic.net/5HyYe.jpg

The issue I am encountering is that the panels need to have relative positioning horizontally to achieve the desired width distribution, but fixed positioning vertically to maintain their place when scrolling.

Using position:sticky would solve this problem, but it is not supported by Chrome/Opera, making it an impractical solution. Implementing JavaScript introduced its own set of issues, especially with animations during expansion/constriction, which did not provide the desired result aesthetically. Therefore, I am seeking a pure CSS solution that works seamlessly across different browsers.

The primary goal is to allow each panel to remain scrollable independently without affecting the rest of the page scroll and maintaining a "sticky" behavior throughout.

Although I am not an expert in CSS, I believe there must be a straightforward solution that I am overlooking. Any help or suggestions are greatly appreciated.

cssflexboxcss-positionsticky

Answer №1

Check out this example using the power of flexbox

html, body {
  margin: 0;
  height: 100%;
}

.flexwrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flexheader {
  flex: 0;
  padding: 10px;
  background: #f93;
  text-align: center;
}

.flexcontent {
  flex: 1;
  display: flex;
}

.flexinner {
  flex: 1;
  background: #09f;
  margin: 1px;
  position: relative;
}

.absscroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
<div class="flexwrapper">

  <div class="flexheader">
    Header
  </div>

  <div class="flexcontent">

    <div class="flexinner">
      <div class="absscroll">

      </div>
    </div>

    <div class="flexinner">
      <div class="absscroll">
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
      </div>
    </div>
    
    <div class="flexinner">
      <div class="absscroll">

      </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

Angular onscroll event creating a parallax effect

I attempted to create a parallax effect using Angular and the OnScroll event, however, while scrolling, the text seems to be flickering. Is there a way to make the smooth rendering onscroll? Maybe through CSS alone? Here is the script I used: https://sta ...

cssangularparallax

Managing the vertical space within a nested accordion section

I've built a custom accordion component, but I'm encountering scrolling issues when trying to use nested levels within the accordion. I'd like to prevent scrolling inside the accordion section and instead have the page scroll below it. Any ...

javascriptcssreactjs

Cordova does not support the transform property

In the process of creating an Apache Cordova app using the Ionic framework and working with Phonegap Build, I encountered a challenge. The main page of my app features rows of icons that appear like this: However, there is a problem on Android 4.4.x and o ...

javascriptandroidcsscordovaionic-framework

Exploring the Application of CSS Styles in Selenium

I need help with a webpage that contains a configurable field. The values of this field can be set through a configuration panel, and it can be marked as required by checking a checkbox which applies a specific style to the field label. My question is, how ...

c#cssseleniumwebdriver

Need to split your screen into two horizontal DIVs, each with their own scrollbars? Check out this example link for a demonstration!

Hey there! I have a question about creating something similar to this cool website: I'm working with Wordpress and using a child theme for my website. I want to include a fixed header as well. Currently, I've managed to give each div its own sc ...

htmlcsswordpress

Incorrect placement of navigation in HTML/CSS dimensions

I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve. The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling t ...

htmlcss

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Bug in Responsive Mega Menu Detected

Hey everyone, I've got a Mega Menu below for you to check out! <div id="menu-wrapper"> <ul class="nav"> <li><a href='#'>Brands</a> <div> <div class="nav-colu ...

htmlcss

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss

Difficulty adjusting table heights in Dreamweaver, Struggling to set table height with <p style declarations

I'm currently designing an email signature in Dreamweaver using a table. However, I encountered an issue when I added the <p=style tag to customize my font size and color - it caused my table heights to change unexpectedly. Despite trying various s ...

htmlcssdreamweaver

Unable to render Material Icons on Vue/Quasar web app hosted on Azure

I am facing an issue with my webapp built using Vue and Quasar. I added the necessary icon imports to my quasar-user-options.js file. import '@quasar/extras/material-icons/material-icons.css' import "@quasar/extras/material-icons-outlined/ma ...

cssvue.jsazure-web-app-servicequasar-frameworkmaterial-icons

What could be causing the issue with absolute positioning not functioning correctly?

I'm having trouble keeping my footer at the bottom of the page: body, html{position:relative;} footer{position:absolute;} Even when I use bottom: 0;, the footer doesn't seem to go all the way to the bottom. Is there anyone who can help me troub ...

htmlcss

Can anyone suggest a method to customize the appearance of select options in Vue.js?

https://i.sstatic.net/qNov8.png Is there a way to customize the color and font of select options? I'm referencing this link for an example: . I attempted CSS modifications but they don't seem to be taking effect. ...

cssformsvue.jsbootstrap-vue

When using the navbar in Tailwind CSS, the image is appearing distorted instead of aligning properly with the adjacent

I am trying to add a flag, login button, and sign up button Using class="flex", I placed an image inside it However, when I add the buttons, the image gets distorted. How can I prevent this? Expected Outcome I want to create the flag, login but ...

htmlimageflexboxtailwind-cssnavbar

Style the modal body to display as a block on both desktop and mobile devices using CSS

My goal is to ensure that the modal-body is vertically aligned for optimal visibility on both mobile phones and PCs. I am utilizing bootstrap for this purpose. <div class="modal-body" style="display: inline-block;"> <div> ...

htmlcssbootstrap-5

Tips on adding conditional styles in Next.js

This is my attempt: function ChangeStrokeToTextAndImage(properties: ChangeStrokeToTextAndImageProps) { return ( <div className={ styles.container0 + " " + properties.isLightGreenBackground == true ? styles.isLight ...

cssnext.js

Design a background or overlay for modal using CSS styling

How do I add a backdrop color behind my React modal screen using just CSS, specifically positioning the overlay with white at .5 opacity behind the modal? .modal-footer-small width: 450px height: auto margin: 0 auto top: 53% left: 0 right: 0 ...

cssreactjsmodal-dialogoverlay

rely on a fresh event starting at one

Despite my limited knowledge in javascript, I managed to create a simple js calendar that I am quite proud of. However, I have been facing a challenge for the past few days. You can view my calendar here: https://jsfiddle.net/ck3nsemz/ The issue I'm ...

javascripthtmlcss

Dynamic content that adjusts based on a multi-row element

I'm currently designing a webpage layout with a calendar on one side and a series of information-divs on the other. In desktop view, I want the calendar to span three rows like so: CAL DIV1 CAL DIV2 CAL DIV3 Right now, I am achieving this using neste ...

csslayoutbootstrap-4sassresponsive-design

Display an HTML code snippet on the webpage

I'm facing a situation that has been discussed before on this platform. However, I want to present my problem in a different light. I am working with PHP and need to display an HTML string from the database on my webpage. The issue is that the CSS app ...

htmlcss