绝对位置div内的全高div

时间:2019-01-08 19:00:33

标签: html css

我正在为一些CSS而苦苦挣扎。

我需要在positioned absolutely并且具有overflow scroll的div上使用“背景”效果。

不幸的是,我无法更改html的结构,因此我非常有限。因此,我不确定100%是否可以正常工作。

这里是一个示例:

#feed {
  left: 0;
    top: 0;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    contain: layout size style;
    position: absolute; 
}

#scroll-content {
  left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;
}

.backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.22);
    z-index: 9;
}
<div id="feed">

  <div id="scroll-content">

    <div class="backdrop"></div>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In aliquam sem fringilla ut morbi. Magna etiam tempor orci eu lobortis elementum nibh tellus. Tincidunt ornare massa eget egestas.
      Faucibus interdum posuere lorem ipsum dolor sit amet. Velit sed ullamcorper morbi tincidunt ornare massa. Congue nisi vitae suscipit tellus mauris a diam maecenas. A diam maecenas sed enim ut sem viverra aliquet eget. Amet nulla facilisi morbi tempus
      iaculis urna id volutpat lacus. Hendrerit gravida rutrum quisque non tellus orci ac. At risus viverra adipiscing at in tellus integer. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Tristique nulla aliquet enim tortor at
      auctor. Convallis tellus id interdum velit laoreet.
    </p>
    <p>
      Ullamcorper a lacus vestibulum sed arcu. Pellentesque nec nam aliquam sem et. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Ridiculus mus mauris vitae ultricies. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Arcu vitae elementum
      curabitur vitae nunc sed. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Turpis egestas integer eget aliquet nibh praesent tristique magna. Eget dolor
      morbi non arcu risus quis. Fermentum posuere urna nec tincidunt praesent semper. Aenean vel elit scelerisque mauris pellentesque pulvinar. Eget dolor morbi non arcu risus quis varius quam quisque. Arcu non odio euismod lacinia at. Risus nec feugiat
      in fermentum posuere urna nec tincidunt. In ornare quam viverra orci. Sed viverra tellus in hac habitasse. Gravida cum sociis natoque penatibus et magnis dis. Id diam maecenas ultricies mi eget. Et netus et malesuada fames.
    </p>
    <p>
      Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Urna neque viverra justo nec ultrices dui. In metus vulputate eu scelerisque. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Eu ultrices vitae auctor eu augue
      ut. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Bibendum neque egestas congue quisque egestas diam. Quis auctor elit sed vulputate mi sit amet. Quis hendrerit dolor
      magna eget est lorem ipsum dolor. Aliquet lectus proin nibh nisl condimentum id venenatis a condimentum. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Sodales neque sodales ut etiam. Dolor sit amet consectetur adipiscing elit.
      In pellentesque massa placerat duis ultricies lacus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Vestibulum morbi blandit cursus risus at ultrices. Varius quam quisque id diam. Magna sit amet purus gravida quis blandit. Facilisi
      nullam vehicula ipsum a arcu cursus vitae congue mauris.
    </p>
    <p>
      Laoreet non curabitur gravida arcu ac. Penatibus et magnis dis parturient. Sit amet venenatis urna cursus. Porta lorem mollis aliquam ut porttitor leo a diam. Vulputate dignissim suspendisse in est ante in nibh mauris. Sed sed risus pretium quam. Massa
      tempor nec feugiat nisl pretium fusce id velit. Ut sem viverra aliquet eget sit amet tellus cras. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. In ornare quam viverra orci sagittis eu. Massa sapien faucibus et molestie ac feugiat sed
      lectus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus.
    </p>

  </div>

</div>

如您所见,当在scroll-content div上滚动时,backdrop不会随之滚动,是否可能使backdrop随内容滚动,或者至少覆盖全部内容?

谢谢

0 个答案:

没有答案