Align Element to the bottom of a div container and stay there when scrolling

Question

the trashcan moves up when scrolling down and it doesnt span over the full width of the parent div

I want it to be like this:

.ParentDiv {
background: red;

overflow-y: scroll;

border: none;
float: left;
position: relative;
height: 80px;
width: 200px;
}



#DivAroundTrashcan{
    
    position:fixed;
    bottom: 0;
    width: 100%;
    height: 15px;
    }

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<div class="ParentDiv" id="ParentDiv" >
<p1><center>efgf </center></p1>
<p2><center>wefwf </center></p2>
<p3><center>wefwef </center></p3>
<p4><center>wefwef </center></p4>
<p5><center>wefwef </center></p5>
<p6><center>wefweff </center></p6>
<p7><center>wefwef</center></p7>
<p8><center>wefwef </center></p8>

        <div id="DivAroundTrashcan"><input type="button"id="Trashcan"value="&#128465"></div>
</div>

</body>
</html>

position:absolute; just makes it stay where it is, but when scrolling it doesnt stay in place

score 1 · Answer 1 · answered Aug 27 '20 at 10:52

1

put position: fixed on the container div of the trashcan, rather than absolute.

answered Aug 27 '20 at 10:52

AaronReed17

26
1
4

then it moves to the bottom of the visible html page but stays there on scroll – Sara Aug 27 '20 at 10:56
@Sara [this](https://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent) might be helpful – AaronReed17 Aug 27 '20 at 11:01

score 1 · Accepted Answer · answered Aug 27 '20 at 11:09

1

You can use flex on your container:

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  /*following is for demo only - not sure what gives your container height */
  height: 100%;
}

.scroll {
  flex-grow: 1;
  overflow: auto;
}

.bin {
  text-align: right;
}

<div class="container">
  <div class="scroll">
    content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
    <br>content<br>content<br>content<br>content<br>content<br>content<br> content
    <br>content<br>content<br>content<br>content<br>content<br>content<br> content
    <br>content<br>content<br>content<br>content<br>content<br>content<br>  content<br>content<br>content<br>content<br>content<br>content<br>content<br>
  </div>
  <div class="bin">bottom bin content</div>
</div>

answered Aug 27 '20 at 11:09

Pete

57,112
28
117
166

Im very sorry for the badly asked question :( your answer seems very nice and clean but when I add it to my Programm it doesnt work:( – Sara Aug 27 '20 at 11:15
1

Then your [mcve] must demonstrate exactly what you have now and why it's not working - if I paste this into your example above, it works just fine – Pete Aug 27 '20 at 11:18
Idk whats happening, I couldnt get it to run, not yours as a standalone and neither in multiple combinations with mine...also I added a full snippet – Sara Aug 27 '20 at 11:28
an important point seems to be that my div is small and doesnt have the full window size – Sara Aug 27 '20 at 11:41
1

Just change the height of the container then - as you can see I have clearly commented that I don't know what is driving the height of your container – Pete Aug 27 '20 at 11:42
Thanks very much, it seems nice, im just trying to figure things out, for me now the parent element has a scrollbar too , and i gave the bin a height, which is very strangely reduced if there is more content inside the div :O – Sara Aug 27 '20 at 12:05

score 0 · Answer 3 · answered Aug 27 '20 at 12:30

0

#DivAroundTrashcan{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: right;
}

answered Aug 27 '20 at 12:30

Александр Кешку

17
4

2

@Александр Кешку, adding a brief explanation aside your code can help both the PO and also increase the chances to having the answer accepted. – Neo Anderson Aug 27 '20 at 15:01

Align Element to the bottom of a div container and stay there when scrolling

3 Answers3