CODEWITHSUNDEEP
csscss-position
AHmedRef
AHmedRef

Reputation: 2621

keep child fixed on the bottom of absolute parent using CSS

i have an absolute scrollable parent div with fixed height value, and a fixed child on the bottom of it's parent, but the child is always set in the bottom the page not it's parent

    .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>

this is the link to see how it's look like.

Upvotes: 0

Views: 43

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16261

use position:sticky; to 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>

Upvotes: 3

Related Questions