@j-e-f-f Sure, that’s the magic of the overflow: hidden style. But what puzzles me is this:
An example:
If you run a webpage in fullscreen mode (either through Electron using Chromium or in a regular browser), and style the body like this:
body {
background-color: #333;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
you will have a grey area that takes up the entire width & height of your screen.
If, on the other hand, you styled the body tag like this:
body {
background-color: #333;
width: calc(100vw-10px);
height: calc(100vh-10px);
padding: 0;
margin: 0;
overflow: hidden;
}
you will have a grey area that is 10px shorter and narrower than the available screen space.
The only reason this wouldn’t be the case is if the html tag has a margin or padding (which would restrict the amount of space available to the body tag) or if you’ve specified a specific screen size directly in Electron (using electronOptions.width and electronOptions.height).
It’s no different than the standard body styles defined in MagicMirror’s main.css file - in there, a margin of 60px is set and then the height & width are set with width: calc(100%-120px) and height: calc(100%-120px) respectively.
