CSS: Make Absolute item in Overflow-Y always fill 100% of Scroll Height

user_13067324 0
Viewed 130

I wanna make this absolutely positioned bar fill 100% of this overflow-y container's scroll height & change dynamically (if possible).

<div id="container">
  <div id="item"></div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

#container {
  height: 300px;
  overflow-y: scroll;
  background-color: #333;
  position: relative;
}

#item {
  position: absolute;
  left: 50px;
  width: 2px;
  background-color: lightgreen;
  height: 100%;
}

https://codepen.io/springer268/pen/oNZJrjN

// sidenote Hacky solutions that don't work in my use case include making it position fixed, or making it absolute to another div above. It has to be relative to this container (zooming issues + other thing.) and actually change height. I'd really like to avoid JS here (using React & it'd get all funky).

Thanks

css
2 Answers

I would make a #container-inner element and place the content within that.

Or is this the solution you're referring to as "hacky"?

#container {
  height: 300px;
  overflow-y: scroll;
  background-color: #333;
}

#container-inner {
  position: relative;
}

#item {
  position: absolute;
  left: 50px;
  width: 2px;
  background-color: lightgreen;
  height: 100%;
}
<div id="container">
  <div id="container-inner">
    <div id="item"></div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
</div>

user_66534260

If you don't want an absolute element, you can do this :

body{
    background-color: #333;
}

#container {
  height: 300px;
  overflow-y: scroll;
  background-color: #333;
  position: relative;
  border-left:2px solid lightgreen;
  margin-left : 50px;
}
user_152820660
Related