将子级扩展到父级可滚动内容的 100% 高度
Posted
技术标签:
【中文标题】将子级扩展到父级可滚动内容的 100% 高度【英文标题】:Expand child to 100% height of parent scrollable content 【发布时间】:2020-01-05 10:03:30 【问题描述】:我想在可滚动搜索列表上显示半透明覆盖(加载期间,更改页面后)。但我无法将覆盖扩展到完整的父内容。我无法设置固定高度,因为父级的大小可能会因结果数而异。
我试图将position: absolute
设置为覆盖。我也在尝试position: sticky
。最后一个效果很好,但它需要预先计算的高度,并且在滚动之前需要空间。
https://jsfiddle.net/yr9xp8cs/ 。使用我目前的方法,覆盖 (::before
) 仅具有可见部分的高度。
我想在可滚动容器的全部内容上设置叠加层,或者设置在滚动前不占用任何空间的粘性叠加层。我不想使用 javascript。
【问题讨论】:
【参考方案1】:所以这就是我要做的。为建议列表创建包装器并使用覆盖。
.search-results-wrapper
具有位置样式,而 .overlay
具有 pointer-events: none
以允许滚动其下方的列表(您可以阅读完整文档 here)。
基本上:
none:元素永远不是指针事件的目标;但是,如果这些后代将指针事件设置为其他值,则指针事件可能会针对其后代元素。在这些情况下,指针事件将在事件捕获/冒泡阶段期间适当地触发此父元素上的事件侦听器。
片段
body
background-color: silver;
.wrapper
position: relative;
.search-results-wrapper
position: absolute;
top: 30px;
left: 0;
.search-results
background-color: white;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
width: 300px;
max-height: 200px;
overflow-y: auto;
ul
padding-left: 0;
li
list-style: none;
padding-left: 0;
margin: 10px 0;
&:nth-child(even)
background-color: wheat;
.overlay
content: '';
display: block;
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: white;
opacity: 0.7;
pointer-events: none;
<div class="wrapper">
<input type="text" placeholder="Search phrase"></input>
<div class="search-results-wrapper">
<div class="overlay"></div>
<div class="search-results">
<!-- place semi transparent overlay here -->
<div>Suggestions:</div>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<div>Page 1/20</div>
</div>
</div>
</div>
【讨论】:
谢谢,这正是我需要的:) 很高兴能帮上忙。以上是关于将子级扩展到父级可滚动内容的 100% 高度的主要内容,如果未能解决你的问题,请参考以下文章
setSizePolicy() 与 QSizePolicy.Expanding 不起作用:子级没有扩展到父级的大小