Creating a Full Window Div


I was having trouble making a DIV take up the full width of the screen for some reason. I thought it’d use standard CSS parameters, but for some reason, the DIV is stuck in the corner and doesn’t take up the whole page. As seen in the image below:

The DIV uses the id “steam” and for some reason, it’s squished behind the Twine side panel. If you would like to see the HTML and CSS I’ve written. I uploaded screenshots here.

If anyone is able to give me any advice on this it would be much appreciated. :~)


Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2.3.13
Story Format: Sugarcube 2.34.1

I created a new SugarCube based project in the Twine 2.x application, that contained the following CSS in its Story Stylesheet area…

body {
	background-color: transparent;

#steam {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	z-index: -1;
	background-color: blue;

…and the following within the project’s initial Passage…

<div id="steam"></div>

Welcome to the sauna.

…and the blue background of the <div> element correctly covered the entire of the web-page’s view-port when I used the Twine 2.x application’s Play option.

Thank you for your help! I ended up figuring it out by testing what you showed. It was an issue where external Javascript was blocking my sizing parameters. :~)