Fill a scrollable element using a before pseudo element - html

Question

Is it possible to vertically fill an element using a before pseudo element, if the parent element is scroll-able?
I'm struggling to get the before to take up more space than the parents outer height, rather than scroll-able height
#example {
position: relative;
width: 300px;
height: 150px;
overflow-y: auto;
}
#example:before {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 0, 0, 0.5);
}
<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>
I could potentially force the before to use a large height, but ideally I would like to set the height properly.
Is there any way to work around this with just CSS changes?

Answer 1

I am not sure whether this is possible with css. But if you add a child element to the scrollable DIV and if you creating the pseudo element for this new div, you can get a similar result. If you are interested, please check the below sample.
#example {
width: 300px;
height: 150px;
overflow-y: auto;
}
#example>div{
position: relative;
background: yellow;
}
#example>div:before {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-color: rgba(255, 0, 0, 0.5);
}
<div id="example">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div></div>

Answer 2

Here is a trick with a sticky element if you cannot consider an extra wrapper:
#example {
position: relative;
width: 300px;
height: 150px;
overflow-y: auto;
}
#example:before {
content: " ";
display:block;
position: sticky;
top: 0;
height:100%;
margin-bottom:-150px; /* Same as height */
background-color: rgba(255, 0, 0, 0.5);
}
<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>

Answer 3

Your can do this by using js can css variable
var arheight = $('#example')[0].scrollHeight;
$(':root').css('--height', arheight);
#example {
position: relative;
width: 300px;
height: 150px;
overflow-y: auto;
}
#example:before {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 0, 0, 0.5);
height: var(--height);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>

Answer 4

you can do like this
body {
margin:0;
}
#example {
position: relative;
width: 300px;
height: 150px;
overflow-y: auto;
overflow-x:hidden;
}
#example:before {
content: " ";
position: fixed;
top: 0;
left: 0;
width:300px;
height:150px;
background-color: rgba(255, 0, 0, 0.5);
z-index:-1;
}
<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>