I want to fix the borders of the document so that when scrolling, the edge of the upper or lower borders of the page is not delayed, as for example on this stackoverflow page.

For this, I set the body overflow: hidden and height: 100%. However, when I set a div that has all the content of the page in it, overflow: scroll, this property does not overlap the body property and the page does not scroll at all.

Please tell me how to block the body property so that the entire document is fixed, but its content scrolls and the borders are not delayed when scrolling. Drawn border

<style> body { margin: 0; padding: 0; } body { padding-top: 50px; } .no-scroll { overflow: hidden; height: 100%; } .scroll { overflow-y: scroll; } body { background-color: #2477ad; color: #ffffff; font-family: Helvetica,sans-serif; } .container { max-width: 1130px; margin: 0 auto; } .nav { padding-top: 6px; background-color: #23a359; position: fixed; top: 0; left: 0; width: 100%; z-index: 2; } .nav-menu { width: 360px; margin-left: 230px; display: inline-block; vertical-align: top; } .nav-menu a { font-size: 14px; padding: 9px 20px 19px 20px; display: inline-block; vertical-align: top; } .logo { display: inline-block; vertical-align: top; } .content { width: 200px; margin: 30px; display: inline-block; vertical-align: top; } </style> <body class="no-scroll"> <div class="container scroll"> <div class="nav"> <div class="logo"> <a href=""> <h3>LOGO</h3> </a> </div> <div class="nav-menu"> <a href="">Home</a> <a href="" class="active">About</a> <a href="">Work</a> <a href="">Contact</a> </div> <div class="clear"></div> </div> <div class="main"> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> <div class="content"> <img src="" alt="Some image" width="200px" height="200px;" /> <p>Some text text text text text text text </p> </div> </div> </div>

  • For completeness, you need to know why you need the entire document to be fixed, and its contents scrolled (roughly speaking, you want 3 but not 3) - smellyshovel
  • I would venture to suggest that you just need a 100% height of the page so that you can set the height of the child elements to 100%? - smellyshovel
  • I apologize for the ambiguities, I will try to explain again. Added a screen to the main question. As seen on it, when scrolling above the top edge of the page, the edge is pulled further. I want to remove this moment so that the top and bottom edges of the document are sewn, so to speak. For this, I set overflow: hidden and height: 100% for the body, but the entire visible area is fixed and the page scrolling stops working. Actually, that's why I need to block this property so that the main content scrolls and the body is fixed. - Yahya
  • Wait, why do you have the SO cap pulled? This behavior should not be. - smellyshovel
  • And why can't you just use something like top: 0; ? Or do I understand the wrong task? - smellyshovel

0