Question

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

我正在努力让before占用比父母外部高度（而不是可滚动高度）更多的空间

#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使用较大的高度，但理想情况下，我想正确设置高度。

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

Answer 1

你可以这样做

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>

Answer 2

如果您不考虑使用额外的包装器，那么这是一个带有粘性元素的技巧：

#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

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

#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 4

您可以使用js can css变量

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>

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

4 个答案: