Quote:
|
Originally Posted by Turtle91
The black area is the "body" … should be the whole screen unless you have some margins or padding as a default.
|
I had added the margins and padding at 0 a few steps ago, no difference.
Quote:
|
Originally Posted by Turtle91
Also, the image dimensions and the display port viewBox dimensions should be the same. Eg.
If:
width="492" height="612"
Then:
viewBox="0 0 492 612"
|
I double checked those numbers, they're correct and match.
I tried applying some ideas from Dave Gray's article:
HTML vs Body: How to Set Width and Height for Full Page Size
I removed the height from div and replaced it with min-height in body:
Code:
<body style="margin: 0; padding 0; background-color:rgb(0,0,0)">
<div style="height: 100vh; text-align: center; padding: 0pt; margin: 0pt;">
Code:
<body style="margin: 0; padding 0; background-color:rgb(0,0,0); min-height: 100vh">
<div style="text-align: center; padding: 0pt; margin: 0pt">
This resulted in the background color along the bottom of the image to extend all the way to the bottom of the screen, but the image didn't extend. Progress? Kinda...
One interesting note from Dave's article:
Code:
...setting the width to 100% before removing the margins will cause the body element to overflow.
Now while he was talking about setting width, I wondered it not clearing the margins first on height might also affect the full screen viewing. That's why I moved the margin and padding values before the height ones. Alas, it didn't help.
Thank you for your continued assistance as I work to resolve this strange behavior.
Tim