Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
392 views
in Technique[技术] by (71.8m points)

html - Fill a scrollable element using a before pseudo element

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...