使用CSS

Question

我有一个绝对的可滚动父级div，其高度值固定，并且其父级底部有一个固定的子级，但该子级始终设置在页面的底部而不是它的父级

    .parent{
      width:300px;
      height: 100px;
      background-color:red;
      position:absolute;
      overflow-y:scroll;
    }
    
    .child{
      width:300px;
      height: 50px;
      background-color:green;
      position:fixed;
      left: 0;
      right: 0;
      bottom: 0;
    }

    <div class="parent">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div class="child">
        
      </div>
    </div>

这是link，以查看其外观。

Answer 1

使用position:sticky;到child

    .parent{
      width:300px;
      height: 100px;
      background-color:red;
      position:absolute;
      overflow-y:scroll;
    }
    
    .child{
      width:100%;
      height: 50px;
      background-color:green;
      position:sticky;
      left: 0;
      right: 0;
      bottom: 0;
    }

    <div class="parent">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div class="child">
        
      </div>
    </div>