There is a need to make scrolling on the page, all blocks are fixed, except for messages that need to scroll inside a fixed one (and the main one is scrolling)
An example of where this is, it should be like .... inside a fixed page to display ordinary blocks, but they should not crawl out of the block (a red frame on the screen)

enter image description here

  • If without scripts, then only with blocks to cover, if with scripts, then repeat scrollTop. - Qwertiy ♦
  • one
    I opened vk and there are no fixed panels except header .... but I’ll still try to show: codepen.io/topicstarter/pen/bmYomN - so what? - Nikita Fast
  • If you are specifically about the message VK, then there is scrolling inside the block (with messages), voooot. - CbIPoK2513
  • Nikita, a good idea, but still a block above which it would crawl: D - Denis Lebedev

2 answers 2

So you wanted?

* { margin: 0; padding: 0; } body { position: relative; --offset: 1em; } header, footer { width: 100%; height: var(--offset); position: fixed; background-color: grey; z-index: 100; left: 0; } header { top: 0; } footer { bottom: 0; } .wrapper { min-width: 320px; max-width: 960px; margin: 0 auto; display: flex; position: relative; } .left { flex: 0 0 160px; height: 160px; background-color: darkcyan; position: sticky; left: 0; top: var(--offset); } .right { flex: 0 0 160px; height: 120px; background-color: darkcyan; position: sticky; right: 0; top: var(--offset); } .main { padding: var(--offset) 0; } 
 <header></header> <div class="wrapper"> <div class="left"></div> <div class="main"> <div class="item"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis voluptatum enim mollitia perferendis aliquam repudiandae officia itaque iste laborum quas laudantium modi nihil numquam unde omnis, facere veniam earum qui saepe. Repellat, tempore doloribus dolorem ducimus distinctio consequuntur eligendi pariatur. </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis pariatur, quasi aut accusantium sequi architecto placeat dolores at deserunt, animi est vero excepturi, fugiat facere. Hic veniam inventore magnam minus. </div> <div class="item"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, rerum accusantium? Quis doloribus animi quisquam vero ea nobis voluptatum nostrum, accusamus commodi sint nam in? </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident numquam magnam error earum pariatur minima. Sit delectus veritatis aliquid nam? Eius, perspiciatis dolor adipisci necessitatibus debitis obcaecati enim ad commodi voluptas maiores voluptatem, dignissimos aliquid asperiores rem neque unde repellendus esse tenetur vel delectus numquam fugiat autem quis recusandae. Incidunt! </div> <div class="item"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore illo sed ratione neque cum dolorem reiciendis dicta provident velit molestiae, quasi deleniti, officia perferendis architecto repellendus vitae totam quaerat, ab nesciunt eius at dolor explicabo laboriosam inventore! Officiis, magni eius. </div> <div class="item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur qui maxime neque, alias natus est eveniet, rerum culpa reprehenderit ab nemo atque ipsa totam, nobis veniam modi beatae recusandae quam. </div> <div class="item"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error consequatur nam est voluptatibus deserunt tempore totam autem, voluptate minima iure id ex fugit officia laudantium. Impedit fugiat quod velit necessitatibus magni! Accusamus, aperiam cupiditate quos vel ea ex incidunt nesciunt eos, sed pariatur laudantium dignissimos animi quis, tempora ipsa architecto. </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vel culpa facere maiores est facilis dicta nesciunt omnis. Laboriosam nihil sequi, cum, numquam iure qui unde voluptatem voluptate magnam nesciunt, in ipsum aperiam modi quisquam velit harum atque exercitationem consequatur. </div> <div class="item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi labore sapiente molestias modi aliquam ab necessitatibus similique ducimus vero dolore. Ullam nemo maxime illum ipsam? Dolores voluptatem accusantium sequi numquam! </div> <div class="item"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, suscipit doloribus. Laudantium adipisci quam deserunt laborum nesciunt, facere dolore iusto nisi harum sunt debitis unde quidem magnam, architecto doloribus tempora ad quibusdam soluta ipsum illum. Deserunt aliquid maxime culpa non! </div> </div> <div class="right"></div> </div> <footer></footer>

  • there should still be blocks above and below, and here they are simply in the edges - Denis Lebedev
  • @DenisLebedev They should also scroll or be separate from the scroll? - Andrey Fedorov
  • Corrected the code. - Andrey Fedorov
  • I think about the Js option with checking the main scroll - Denis Lebedev
  • Well, you probably still need to use polyfills for position: sticky , t.ch. it is possible to solve on js. - Andrey Fedorov

 *{ margin:0; padding:0; } html,body{ min-height:100%; padding-bottom:20px; overflow:hidden; } .left{ width:250px; height:100vh; background:#fbfbfb; position: fixed; top:0; left:0; } .right{ width:250px; height:100vh; background:#cff; position: fixed; right:0; top:0; } .content{ width:calc(100% - 550px); height:100vh; background:#fff; margin:auto; overflow-y: scroll; } .item{ width:90%; margin:30px auto; padding:20px; } .item:first-child{ margin-top:0px; } .footer{ width:calc(100% - 550px); background:gray; margin:auto; height:50px; position: fixed; bottom:0; left:50%; transform:translateX(-50%); } 
 <div class="left"></div> <div class="right"></div> <div class="content"> <div class="item"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis voluptatum enim mollitia perferendis aliquam repudiandae officia itaque iste laborum quas laudantium modi nihil numquam unde omnis, facere veniam earum qui saepe. Repellat, tempore doloribus dolorem ducimus distinctio consequuntur eligendi pariatur. </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis pariatur, quasi aut accusantium sequi architecto placeat dolores at deserunt, animi est vero excepturi, fugiat facere. Hic veniam inventore magnam minus. </div> <div class="item"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, rerum accusantium? Quis doloribus animi quisquam vero ea nobis voluptatum nostrum, accusamus commodi sint nam in? </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident numquam magnam error earum pariatur minima. Sit delectus veritatis aliquid nam? Eius, perspiciatis dolor adipisci necessitatibus debitis obcaecati enim ad commodi voluptas maiores voluptatem, dignissimos aliquid asperiores rem neque unde repellendus esse tenetur vel delectus numquam fugiat autem quis recusandae. Incidunt! </div> <div class="item"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore illo sed ratione neque cum dolorem reiciendis dicta provident velit molestiae, quasi deleniti, officia perferendis architecto repellendus vitae totam quaerat, ab nesciunt eius at dolor explicabo laboriosam inventore! Officiis, magni eius. </div> <div class="item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur qui maxime neque, alias natus est eveniet, rerum culpa reprehenderit ab nemo atque ipsa totam, nobis veniam modi beatae recusandae quam. </div> <div class="item"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error consequatur nam est voluptatibus deserunt tempore totam autem, voluptate minima iure id ex fugit officia laudantium. Impedit fugiat quod velit necessitatibus magni! Accusamus, aperiam cupiditate quos vel ea ex incidunt nesciunt eos, sed pariatur laudantium dignissimos animi quis, tempora ipsa architecto. </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vel culpa facere maiores est facilis dicta nesciunt omnis. Laboriosam nihil sequi, cum, numquam iure qui unde voluptatem voluptate magnam nesciunt, in ipsum aperiam modi quisquam velit harum atque exercitationem consequatur. </div> <div class="item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi labore sapiente molestias modi aliquam ab necessitatibus similique ducimus vero dolore. Ullam nemo maxime illum ipsam? Dolores voluptatem accusantium sequi numquam! </div> <div class="item"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, suscipit doloribus. Laudantium adipisci quam deserunt laborum nesciunt, facere dolore iusto nisi harum sunt debitis unde quidem magnam, architecto doloribus tempora ad quibusdam soluta ipsum illum. Deserunt aliquid maxime culpa non! </div> </div> <div class="footer"></div>

I suggest this option. Expand the code to the full page to see the full picture, according to your code.

  • your option could not write? - Nikita Fast
  • @ NikitaFast Why? if you can change an existing code. Asked to scroll through the messages, I did. - Evgeny Nikolaev
  • I thought I could do it on Js, skyline the main one, and scroll through the div - Denis Lebedev
  • @DenisLebedev if the client is disabled in the JS browser. That yours will not work. But the chance of this is very small - Evgeny Nikolaev
  • @YevgenyNikolaev you took the code from my sandbox what did you do there? - Nikita Fast