使用before伪元素填充可滚动元素

问题描述

如果父元素是可滚动的，是否可以使用before伪元素垂直填充元素?

Is it possible to vertically fill an element using a before pseudo element, if the parent element is scroll-able?

我正在努力让before占据比其父外部高度(而不是可滚动高度)更多的空间

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>

我可能会强迫before使用较大的高度，但理想情况下，我想正确设置高度.

I could potentially force the before to use a large height, but ideally I would like to set the height properly.

有什么方法可以解决CSS更改吗?

Is there any way to work around this with just CSS changes?

推荐答案

我不确定css是否可行.但是，如果将子元素添加到可滚动的DIV中，并且为此新div创建了伪元素，则可以获得类似的结果.如果您有兴趣，请检查以下示例.

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>

这篇关于使用before伪元素填充可滚动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！