Make div stick to the bottom regardless of height of parent-CodePudding

I am trying to create a shopping cart, where the items are listed (green), and a "suggestion box" (pink) should be displayed on the bottom.

The suggestion box (pink) should stay on the bottom always; when items are getting added to the list (green), it should not cover them up, but move to the bottom of the list.

Basically, it should stay on the end of the list, and if there is only one or no items(green) on the list, Suggestion box(pink) should stay on the bottom.

Any idea on what do I need to set here?

Honestly, I have no clue on what I am doing, so any suggestions would be appreciated.

Here's my demo: https://codepen.io/ycckgmlm-the-sans/pen/mdjxEeV

#wrapper {
  text-align: center;
  margin: 0;
  font-weight: 300;
  float: right;
  border: 1px solid #000;
  height: 100%;
  background-color: #FFFFFF;
  bottom: 0px;
  color: #000433;
  display: block;
  font-size: 16px;
  font-style: normal;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 50px;
  top: 0px;
  width: 450px;
}

#scroller {
  width: 100%;
  display: block;
}

#list-wrapper {
  overflow-y: auto;
}

#green {
  height: 250px;
  width: 410px;
  background-color: green;
  margin: 20px;
}

#pink {
  height: 250px;
  width: 100%;
  background-color: pink;
  bottom: 0;
  position: sticky;
}

<div id="wrapper">
  <div id="scroller">
    <div id="list-wrapper">
      <div id="green">Item should scroll</div>
      <!--
          <div id="green">Item should scroll</div>
          <div id="green">Item should scroll</div>
          <div id="green">Item should scroll</div>
          -->
      <div id="pink">Pink<br>Stays on bottom and not covering up items on the list.</div>
    </div>
  </div>
</div>

CodePudding user response：

You have to change position: sticky; to position: absolute; of #pink

CodePudding user response：

I changed 3 things:

Switch sticky for absolute on pink element.
Add margin-bottom to green to leave space for pink element.
I set the wrapper to position relative, so pink element uses bottom of this wrapper

#wrapper {
  text-align: center;
  margin: 0;
  font-weight: 300;
  float: right;
  border: 1px solid #000;
  height: 100%;
  background-color: #FFFFFF;
  bottom: 0px;
  color: #000433;
  display: block;
  font-size: 16px;
  font-style: normal;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 50px;
  top: 0px;
  width: 450px;
}

#scroller {
  width: 100%;
  display: block;
}

#list-wrapper {
  overflow-y: auto;
  position: relative;
  padding-bottom: 250px;
}

#green {
  height: 250px;
  width: 410px;
  background-color: green;
  margin: 20px;

}

#pink {
  height: 250px;
  width: 100%;
  background-color: pink;
  bottom: 0;
  position: absolute;
}

<div id="wrapper">
  <div id="scroller">
    <div id="list-wrapper">
      <div id="green">Item should scroll</div>
          <div id="green">Item should scroll</div>
          <div id="green">Item should scroll</div>
          <div id="green">Item should scroll</div>
      <div id="pink">Pink<br>Stays on bottom and not covering up items on the list.</div>
    </div>
  </div>
</div>

CodePudding user response：

You can use flex to solve the problem.

This is the updated answer:

change your CSS for list-wrapper, green and pink to this:

#list-wrapper {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: absolute;
  background-color: blue;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#green {
  height: 250px;
  width: 410px;
  background-color: green;
  margin: 20px;
  justify-self: start;
}
#pink {
    height: 250px;
    width: 100%;
    background-color: pink;
    justify-self: end;
}

CodePudding user response：

You can use the "position: absolute" and "bottom: 0" CSS properties to make a div stick to the bottom of its parent element regardless of the parent's height.

For example:

.child {
    position: absolute;
    bottom: 0;