Question 45634 in CSS Question posted in
Some basic documentation can be found here.

sticky sidebar height is larger than the screen size – CSS

When the screen size is smaller, the rest of the side bar content is invisible (like overflow: hidden) in my project. But it in example it is scrollable, even though it is scrollable it is stretching 1.cms-element, if I make align-items: flex-start; it is only affecting 1.cms-element and making huge gap between 3.cms-element.
If I give overflow-y: scroll; max-height: 100vh;' to .side class it is effecting sidebar height and style. If I give min-height: 100vh; to .side class it working but stretching another elements to fit in the content.

STACKBLITZ

How can I achieve this without effecting another elements ? Also order should not change as given 1, 2, 3, 4.

How can I make sidebar visible in all sizes without effecting other elements size

This is how looks like on the project

Tags:

2

Answers


  1. 0

    One solution could be to wrap the content inside the sidebar in a container with a fixed height and overflow-y: scroll; This way, the container will be scrollable while not affecting the rest of the page elements.

    HTML:

    <div class="side">
  <div class="side-content">
    <div class="cms-element">1. CMS Element</div>
    <div class="cms-element">2. CMS Element</div>
    <div class="cms-element">3. CMS Element</div>
    <div class="cms-element">4. CMS Element</div>
  </div>
</div>

    CSS:

    .side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.side-content {
  height: 400px;
  overflow-y: scroll;
}
    Login or Signup to reply.
  2. 0

    To make the sidebar fit in all screen sizes, it is necessary to adjust the gap of each element with respect to the sidebar height (calc(100vh - ([no. of .cms-element] * 2rem)), as the row-gap value can interfere with the sidebar height.

    Also by using grid-row: ([total no. of .cms-element]+1)/-2 in the .side element, it is possible to preserve the gap between the 1.cms-element and 3.cms-element.

    JavaScript can be utilized for a more flexible approach to maintaining the value mentioned above.

    Here is the solution based on your example:

    SCSS:

    .cms-frame {
  .frame-body {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));

    .cms-element {grid-column: span 12 / span 12;} // for small devices make it full width

    @include desktop() {     

      > *:not(.side) {
        grid-column: span 8 / span 8;
      }
      
      .side {
        height: calc(100vh - (3 * 2rem)); // reduce gap from each .cms-element excluding .side
        overflow: auto;
        position: sticky;
        top: 0rem;
        grid-row: 4/-2; // since .side position is at 2 make its end-position -2 and start position total element
        grid-column-start: 9;
        grid-column-end: 13;
      }
    }
  }
}

    Javascript:

    const cmsEl = document.querySelectorAll('.cms-element');
const sidebar = document.querySelector('.side');

sidebar.setAttribute('style', `
height: calc(100vh - (${cmsEl.length - 1} * 2rem));
grid-row: ${cmsEl.length }/-2;
`); // -1 to excude .side itself

    Hope you find it useful 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search