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

Css – 100% height on ::before element that his parent has overflow scroll attribute

I have a div with overflow scroll attribute and i want to see its background in a ::before (since backdrop-filter doesn’t work with multiple divs otherwise)

So my issue is to extend the ::before height to be 100% in an overflow div, an example:

.scrollable {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow-y: scroll;
  position: relative;
}

.scrollable::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
<div class="scrollable">
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
</div>

How can I fix that issue? I can increase the height beyond 100% but I seems like a bad practice, and also it doesn’t help in my real example.

Tags:

2

Answers


  1. 0

    This can be accomplished with JavaScript and a CSS variable.
    First, think of a CSS variable to use for the ::before height. We’ll set the value using JavaScript in a moment.

    .scrollable::before {
  content: "";
  position: absolute;
  width: 100%;
  /* SEE HERE */
  height: var(--beforeHeight);
  background: rgba(0, 0, 0, 0.5);
}

    Next, you can actually set CSS variables from JavaScript. First, access document.documentElement (which is equivalent to the root element) .style and call setProperty().

    // get the full height (scrollHeight) of the scrollable <div>
const scrollable = document.querySelector('.scrollable');
const fullHeight = scrollable.scrollHeight;
// set the CSS variable to the result (don't forget to add 'px')
document.documentElement.style.setProperty('--beforeHeight', `${fullHeight}px`);

    RESULT

    const scrollable = document.querySelector('.scrollable');
const fullHeight = scrollable.scrollHeight;
document.documentElement.style.setProperty('--beforeHeight', `${fullHeight}px`);
    .scrollable {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow-y: scroll;
  position: relative;
}

.scrollable::before {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--beforeHeight);
  background: rgba(0, 0, 0, 0.5);
}
    <div class="scrollable">
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
</div>
    Login or Signup to reply.
  2. 0

    If the parent height is known you can try to hack it using position sticky

    .scrollable {
  --h: 100px; /* the parent height */

  border: 1px solid black;
  height: var(--h);
  width: 100px;
  overflow-y: scroll;
  position: relative;
}

.scrollable::before {
  content: "";
  display: block;
  position: sticky;
  top: 0;
  height: inherit;
  margin-bottom: calc(-1*var(--h));
  background: rgba(0, 0, 0, 0.5);
}
    <div class="scrollable">
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search