How to set a fixed indent bottom 50px below (from the viewport ), if the parent unit of the element is higher in height than the viewport , i.e. Is there a scroll height?

position fixed does not fit: the element must remain in the parent block, i.e. go up when scrolling the site.

    1 answer 1

    So good?

     html { height: 100%; } body { height: 200%; } div { position: absolute; line-height: 2em; top: calc(100vh - 50px - 2em); border: 1px solid; } 
     <div>Block in the bottom</div>

    • It's easier to write bottom: 50px; how to draw the top: calc(100vh - 50px - 2em); formula top: calc(100vh - 50px - 2em); . - Visman
    • @Visman, bottom:50px will be counted from the bottom edge, I'm not from the bottom of the window, so it does not fit. calc if desired (and height in pixels) can be replaced by margin. - Qwertiy ♦