Document page has a scroll bar bug

[xjArea]

Description

When there is a Y scrollbar on the document page, it will definitely cause the X scrollbar to appear, because the #page-layout node is set to width: 100vw;.

In fact, many people overlook a detail, that is, 100vw does not include the Y scrollbar, so when the Y scrollbar exists, the width of your page is 100vw + YscrollbarWidth, in this case the width It will be greater than 100vw, so a horizontal scroll bar will appear.

The solution is also very simple, just delete width: 100vw;, in fact, if you set height: 100vh; for a certain node, there will be problems, that is, when the X scroll bar appears , no matter whether the content of the page needs the Y scroll bar or not, the Y scroll bar will definitely appear at this time, because the minimum height of the page at this time is actually 100vh + XscrollbarHeight, of course, if your page is responsive, it is definitely not There will be an X scroll bar, so height: 100vh; can get a perfect result.

Some people didn't notice this detail, probably because they use MacOS, on this system, maybe some browsers' scrollbars don't actually occupy the real position, They floating on the content, so people can't realize this problem.

[brillout]

Indeed, I could reproduce.

Some people didn't notice this detail, probably because they use MacOS, on this system, maybe some browsers' scrollbars don't actually occupy the real position, They floating on the content, so people can't realize this problem.

Yes, that was my case as well.

[xjArea]

In fact, if you want body has minWidth === 1 page width or minHeight === 1 page height, there is no perfect solution in the field of css, whether you use vh units, or Using table or flex or grid and other layouts actually have their own defects, the only perfect way is use js, although the code looks cumbersome, but it is always reliable and there will be no any accidents, although these things have nothing to do with VPS :

<style>
/* border-box - than you don't need to care body has padding/border or not */
body{margin:0;box-sizing:border-box;}
</style>

<script>
setBodyMinSize = function(){
    document.body.style.minWidth = document.documentElement.clientWidth + 'px';
    document.body.style.minHeight = document.documentElement.clientHeight + 'px';
};
window.addEventListener('resize', function(){ setBodyMinSize() }, true);
setBodyMinSize();
</script>

[brillout]

I actually just realized that as well. But I can't find a JS solution either. I just tried your snippet and doesn't solve the problem. What I want is "make this element the full width of the page". A workaround for #page-layout is easy but for nested elements I can't find a solution.

[brillout]

"make this element the full width of the page"

I'm starting to think it's impossible to achieve.

[brillout]

More precisely: the only way to achieve it to to inherit width: 100% all the way from body to the nested element. A pain 😅 but seems like there isn't another way?

[xjArea]

This kind of problem needs to find the optimal solution according to the specific scenario. Width is generally much easier to deal with than height, because the default width of block tag is 100%, but the current VPS official website seems to be not so easy to deal with the problem of scroll bars Because I found that when the navigation on the left is closed, the problem of the x scroll bar becomes more serious. It may be troublesome to fix it. It is recommended to do css in the future and not let the browser scroll bar float, otherwise it will be difficult to deal with the problem. 😂

[brillout]

Fixed, including a couple of other things.

Thanks for the bug report! And let me know if you find other issues.