Is there a way . . .

michael5r

@michael5r - Actually, I don’t get scrollbars at all. If I don’t subtract back from the 100vh/100vw or 100% - It’ll just run off the edge of the screen as if the system is seeing the screen (In this case, the RasPi’s 7" touchscreen) bigger than it is. With it set the way I have it, everything is dead on edge, giving the maximum use of the screen.

I’m glad it works for you, but it still doesn’t make any sense :)

j.e.f.f

@michael5r the CSS is also set to hide overflow on the body so even if the CSS defines a screen size larger than 100% you won’t get scroll bars. You’ll just get the contents pushing off screen or at least not centred.

michael5r

@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.