绝对位置固定在可滚动容器中

Question

I have a scrollable container, I want an image to be displayed in the middle on the bottom of the container, that will stay in the same place on the screen when I will scroll down. How should I do this? Right now I have something like this:

  #container { height: 80vh; border: 1px solid black; padding: 0 !important; overflow-y: auto; overflow-x: hidden; position: relative; } #fixed { position: fixed; bottom: 0; left:0; right:0; margin-left:auto; margin-right:auto; background-image: url('../images/img.png'); width: 256px; height: 256px; } 

  <div id="container"> // scrollable content <div id="fixed"> </div> </div> 

But the image seems to be completely out of place. Position: absolute make the element disppear when I keep scrolling. How can I solve this?

Answer 1

Here's a solution:

Main changes to your draft: min-height of container: 100vh (full height of window), plus some details ( margin: 0; on body , box-sizing: border-box; on container, bottom: 1px on image div)

 body { margin: 0; } #container { min-height: 100vh; box-sizing: border-box; border: 1px solid black; padding: 0 !important; overflow-y: auto; overflow-x: hidden; position: relative; } #fixed { position: fixed; bottom: 1px; left: 0; right: 0; margin-left: auto; margin-right: auto; background-image: url('http://placehold.it/256'); width: 256px; height: 256px; } 

 <div id="container"> // scrollable content <br><br><br><br><br><br> <p>blabla</p> <br><br><br><br><br><br> <p>blabla</p> <br><br><br><br><br><br> <p>blabla</p> <br><br><br><br><br><br> <p>blabla</p> <br><br><br><br><br><br> <p>blabla</p> <br><br><br><br><br><br> <p>blabla</p> <div id="fixed"> </div> </div> 

Answer 2

You can use flexbox layout.

jsFiddle

 #container { height: 80vh; border: 1px solid; display: flex; flex-direction: column; } #scroll { background: pink; overflow: auto; flex: 1; } #fixed { background: silver; flex: 0 0 30px; } 

 <div id="container"> <div id="scroll"> <div style="height: 200vh;"></div> </div> <div id="fixed"> </div> </div>