Quote:
Originally Posted by ElMiko
So, for example, while you have a solution to fitting the image on a single page (by reducing the height to 99%, which is what I had done and adding a contingent vh specification), I'm puzzled by why 100% height would produce greater than 100% height in the non-svg example, despite having set the html, body, and container to 100% as per the Josh Comeau article.
|
One thing is the screen height, and another thing is the html/body height; many times are not the same. With your code, you set the body height to 100% (or whatever) but that 100% can be higher than the 100% of the screen height. When that happens, it appears a vertical scrollbar but it doesn't mean your code is wrong; you need to test it with one of the Sigil's plugin (Readium, Bibi Reader, JSReader) and not in the Sigil's Preview Pane. If you don't like that vertical scrollbar in Sigil (that means nothing), add to the html/body style the property "overflow: hidden".
Code:
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
Open the epub I attach with Sigil/PageEdit/Calibre and now you won't see any scrollbar. You need to know what is the "viewport". Read the following article:
https://elementor.com/blog/vh/
Pay attention when the article says:
Quote:
|
Before we master the ‘vh’ unit, we need a solid grasp of the browser viewport. Think of the viewport as the visible area of your website within the browser window. It’s important to note that the viewport is sometimes the same size as your device’s physical screen. Factors like browser toolbars, scrollbars, and whether the browser is maximized or resized can all influence viewport dimensions.
|
Quote:
|
Likewise, I understand that an SVG wrapper would preempt the variously scrolling/squeezing issues, but don't understand why Sigil treats it one way and Calibre treats it another.
|
Open the epub I attach and you'll see all is showed of the same way in Sigil/PageEdit/Calibre.
PS: You are using "%" and not "vh". With "vh" you don't need to style the <html> tag; the problem here is that ereaders based on RMSDK don't support "vh" and you are forced to employ "%"
