In general, there is a block whose contents are quite fit into it, but the block itself does not fit onto the page, position is fixed. The common page has a scroll, but you need to add a separate scroll to this block. It does not go up when scrolling through the main page. How many I am not trying to implement - everything is empty, so I can’t even throw off the code with some ideas. I would be grateful for any help.

  • That is, in fact, if the block does not fit onto the page, I need to dynamically trim its height until it fits, and the scroll will appear then - mmfsy

1 answer 1

You may not know about the top , right , bottom , left properties for fixed and absolute elements. If you specify top: 0 and bottom: 0 for a fixed element, it will stretch along the page height from top to bottom and in this case you will not need to dynamically cut anything.

For a scroll to appear inside an element, you need to set overflow: auto

 html{height: 100%;} body{margin: 0; height: 100%;} .fixed{position: fixed; top: 0; bottom: 0; right: 0; width: 200px; background: #B0C4DE; overflow: auto;} 
 <!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <body> <div style="height: 2000px;">Контент сайта</div> <div class="fixed"> <div style="height: 2000px;">Контент фиксированного блока</div> </div> </body> </html>