Log in / Register

Forum › Bugs

100vw not reaching full body height (with margin 0)

frederik
Hi all,

I am trying to create a block element that takes up 100vh of a named page (named cover). I am giving @page cover 0 margins so and gave the body a yellow background (which fills the entire page).

The element I am trying to put to 100vh has a red background but it does not reach the bottom of the page. I found out that when I set @page margin: 0; the problem goes away - but in my understanding @page cover should have it's own margin. Is this a misconception on my part of a bug?

Kindly
Frederik

<html>
<head>
	<style>
		/* @page {
			margin: 0.5cm;
		} */

		@page cover {
			margin: 0;
			padding: 0;
		}
		
		body {
			background: yellow;
		}

		section {
			page: cover;
			background: red;
			height: 100vh;
		}
	</style>
</head>

<body>
	<section>
		Expected to cover the entire page.
	</section>
</body>

</html>
howcome
I believe you are right. The 'vh' unit is 'Equal to 1% of the height of the initial containing block'. And the initial containing block is equal to the 'page area', which increases in size when the page margin is set to zero (like you do above).

https://www.w3.org/TR/css-values-3/#viewport-relative-lengths
https://www.w3.org/TR/css-page-3/#page-model

Thanks for providing a minimal test case which highlights the problem.

Edited by howcome