joshun

That is awesome! I tried another approach - delete the footer framework and align footbar and logger with the first 3 divs, each with absolute position on where is top and where is bottom, problem also solved.

It is simple as this: Two bars on top, then content window, then one foot bar followed by a logger window at the bottom. I want the 5 div's height all together add up to 100vh - meaning there will be no scrollbar on the right side of a browser. So I arranged each div's dimension by a constant or a variable: body{ --ftheight: 6.5em; --navheight: 1.5em;} #header{height: 1.5em;} #nav{height: var(--navheight);} #main{ top: calc( 1.5em + var(--navheight) ); bottom: var(--ftheight);} #footer{ bottom: 0; height: var(--ftheight);} #footbar{height: 1.5em;} #logger{height:inherit;} I played a lot of combinations, position:relative, position:absolute, position:fixed, but All of them result in an overflow total with a browser scrollbar, or two bars with one at the bottom! I also tried flexbox, with flex-grow:none and flex-grow:1, which did not work either. So in the world of CSS, 1+1>2! common.css two_sections.html

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:

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