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.

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

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

htmlcsshover

What is the best way to arrange these divs one on top of another?

I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_sec ...

htmlcss

Angular 2: Implementing a Universal CSS Style Sheet

Is there a way to include a universal CSS file in Angular 2 applications? Currently, I have multiple components that share the same button styling, but each component has its own CSS file containing the styles. This setup makes it difficult to make changes ...

cssangularangular-cli

I'm feeling lost trying to figure out how to recycle this JavaScript function

Having an issue with a function that registers buttons above a textarea to insert bbcode. It works well when there's only one editor on a page, but problems arise with multiple editors. Visit this example for reference: http://codepen.io/anon/pen/JWO ...

javascriptcss

What could be causing my page's wrapper to shrink upon logging in?

After logging out, the background of my page wrapper expands to cover 100% of the page. However, once you log back in, it shrinks and adjusts to the width of the member bar... TO TEST USER ACCOUNT BELOW: USERNAME: TEST PASSWORD: TEST123 HTML FOR LOGGED ...

htmlcss

Firefox not displaying caret in Bootstrap dropdown

I am trying to display a caret on the right side of a bootstrap dropdown button inside a button-group. Here is the code snippet I am using: <div class="span3 well"> <div class="btn-group btn-block"> <a class="btn btn-primary dro ...

htmlcssfirefoxtwitter-bootstrap

React Application - The division is positioned centrally when run on local host, however, it does not retain its center alignment

I'm encountering an issue with deploying my create-react-app on github pages. The first image showcases my deployed app on github pages, but the image is not properly centered on the page as intended. https://i.stack.imgur.com/rOciT.jpg On the othe ...

htmlcssreactjsgithubgithub-pages

Displaying user input data in a separate component post form submission within Angular

I recently developed an employee center app with both form and details views. After submitting the form, the data entered should be displayed in the details view. To facilitate this data transfer, I created an EmployeeService to connect the form and detail ...

htmlcssnode.jsangulartypescript

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...

csshtml

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml

CSS code for a fixed fullscreen menu with scrolling

I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...

htmlcssangular

What is the best way to apply styling to an image that is contained within the document.write function?

I'm looking to customize the design of this cat image, but I'm struggling to locate where to incorporate the div class. It's likely a basic step, but as a beginner in JavaScript, I'm hoping that someone can assist me. document.write(&ap ...

javascriptcss

Transformation of visuals with alteration of status

I am attempting to change the image of a door from closed to open when the status changes in my home automation dashboard. I need help with this task. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...

javascripthtmlcss

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

htmlcss

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

I have a simple question because I'm feeling a bit lost. Check out this JSFiddle link It seems that in Internet Explorer, the contents of my span won't update even though the input is valid. However, in other browsers, the span content changes ...

javascriptjquerycsshtml

Dynamic menu bar accompanied by primary content

I'm facing an issue with my active navigation bar. Whenever I open the hamburger menu, the main content remains fixed and does not move along with the open navigation menu. I tried searching online for a solution but couldn't find anything helpfu ...

javascripthtmlcss

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

Here is the code I have written for my project (view fiddle here): img { width: 200px; height: 200px; } .image-container { width: 600px; height: 200px; overflow: hidden; } I am working with multiple images, all sized at 200px by 200p ...

htmlcss

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same ...

jqueryhtmlcss

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

Lately, I've been facing some challenges and my objective is to change the color of the thumb label on my v-slider to a custom one that is defined in the component's design. Can anyone provide guidance on how to achieve this? Regards, Joost ...

cssvue.jsvuetify.jstextcolorv-slider

Strategies for Resolving the IE 8 Issue with Table Row Background Images

Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8. In short, when you add a background image to a table row, the background is showing up in all the inner cells as well. ...

cssdebugginginternet-explorer-8background-imagecss-tables