使用 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>

使用 CSS 将子项固定在绝对父项的底部

keep child fixed on the bottom of absolute parent using CSS

css

css-position