I tried to split a page into two sections with a scroll bar for each but it does not work as expected

[joshun]

In the webpage two_sections.html I tried to use two scrollbars and cancel the browser scrollbar.

However the lower scrollbar does not work at all. I know the bug might rest in the body section `overflow:hidden`

But it is the only way I know to split the two sections without a scrollbar on browser. Any walk-around?

common.css two_sections.html

[Ingolme]

The #logger element doesn't have a fixed height, so the scroll bar on it doesn't do anything. If you remove the overflow from #logger and put "overflow: auto" or "overflow:scroll" on the #footer instead then it will scroll correctly.

[joshun]

23 hours ago, Ingolme said:

The #logger element doesn't have a fixed height, so the scroll bar on it doesn't do anything. If you remove the overflow from #logger and put "overflow: auto" or "overflow:scroll" on the #footer instead then it will scroll correctly.

Hi Ingolme!

Thanks for your reply. What I really want to scroll is the #logger inside #footer, while I want to keep #footbar visible. I don't want it to get hidden because it is the top of #footer.

So I made a small adjustment to the #logger, adding `  height:inherit;`

#logger{
    background-color: #111;
    color:antiquewhite;
    width:inherit;
    height:inherit;
    overflow-x: hidden;
    overflow-y: scroll; 
/*    margin-right: calc(100vw - 100%);*/
}  

But a strange thing happened, the last half line is chopped off, together with the downward button of the scrollbar:

This bug disappears after I chopped off overflow:hidden of body. But the third scrollbar appears, the browser scrollbar. Also the horizontal browser scrollbar appears too:

Edited April 18 by joshun