CODEWITHSUNDEEP
htmlcsscss-positionfixedabsolute
Embedded_Mugs
Embedded_Mugs

Reputation: 2406

How to stick element to bottom of its container if the container is scrollable?

My problem is that the green child element does not stick the bottom even though it's positioned absolute with bottom:0.

The hello world text in the container is making the container scrollable and making the green element not able to stick to the bottom.

Edit: The container needs position: fixed. (Its a shopping cart modal).

.container {
 background: red;
 height: 100%;
 width: 200px;
 position: fixed;
 overflow: auto;
}

.child {
 background: green;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
}
<div class='container'>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>

v
<div class='child'>
asdf
</div>

</div>

Upvotes: 2

Views: 2369

Answers (3)

Abhijeet Singh
Abhijeet Singh

Reputation: 21

use position:sticky and also give some bottom margin so that the element won't hide.

Upvotes: 1

matt
matt

Reputation: 71

Maybe position: sticky on the child works for you? This way it will not cover the bottom of the container which you would have to take care of with padding when using position: absolute.

.container {
 background: red;
 display: flex;
 flex-direction: column;
 height: 100%;
 width: 200px;
 position: fixed;
 overflow: auto;
}

.container__inner {
  flex: 1
}

.child {
 background: green;
 position: sticky;
 bottom: 0;
 left: 0;
 right: 0;
}
<div class='container'>
<div class='container__inner'>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>

v
</div>
<div class='child'>
asdf
</div>

</div>

Upvotes: 2

The Anonymous Koder
The Anonymous Koder

Reputation: 602

position: sticky does the trick.
However, you also need to add bottom: 8px to prevent it from being half hidden

.container {
  background: red;
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: auto;
}

.child {
  background: green;
  position: sticky;
  bottom: 8px;
  left: 0px;
  right: 0px;
}
<div class='container'>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>

  <div class='child'>
    footer preview
  </div>
  <div style='background: green'>rest of footer<br> &nbsp</div>

</div>

Upvotes: 1

Related Questions