How can I fix this 100% height problem on Firefox

Hi guys,

I try to put everything inside the device’s window and it looks good on Chrome and even IE but Firefox. When I set height: 100%, it goes beyond the window’s height on Firefox.

How can I fix this? Here’s my code:

<!DOCTYPE html>
<html><head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">
	<meta charset="UTF-8">
	<title>100% Height</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		body {
			position: relative;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			font-family: Arial, Helvetica, sans-serif;
			-webkit-flex-direction: column;
				-ms-flex-direction: column;
					flex-direction: column;
		}
		h1 {
			text-align: center;
		}
		h1 a {
			font-size: 1em;
		}

		#top {
			width: 100%;
		}
		canvas {
			width: 100%;
			height: 100%;
			background: #000;
		}
	</style>
</head><body>
	<div id=top>
		<h1>
			<a href="#">Site Name</a>
		</h1>
	</div>
	<canvas></canvas>
</body></html>

Thank you,

Ketting00,

100% high canvas plus the height of the anchor exceeds 100%; thus, the scrollbar.
EDIT: I’m not so sure that my ‘diagnosis’ is correct. Canvas is a ‘special’ container and I’ve not used it before. I do not think its dimensions are quite so obvious.

If you need help with a redesign, then please explain why flexbox on the body. It doesn’t seen to serve a purpose. Couldn’t you do this with a sticky footer layout?

Take a looks at Paul’s sticky footer example posted here:
DIV with child DIVs and how to manage the height/width - #11 by ronpat

Paul’s layout permits any height header or title at the top of the page plus anything that you wish to put in the body. If the content is greater than the available height, the page scrolls… The sticky footer is not required if you do not want to use it.

Hi,

I want to display everything inside a device’s window, no scrolling - for this page.
Yes, sticky footer is included. But it looks fine on Chrome.

If this only Firefox issue, I will ignore it since people don’t use it on mobile device.

Thank you,

They don’t? I use it, and so does Running Bear.

1 Like

Hi there ketting00,

try it like this, possibly…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>100% Height</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font: 100%/150% arial, helvetica, sans-serif;
 }
h1 {
    line-height: 2em;
    margin: 0; 
    text-align: center;
 }
h1 a {
    font-size: 1em;
 }
canvas {
    display:block;
    width: 100%;
    height: calc(100% - 4em);
    background: #000;
	}
</style>
</head>
<body>
<h1>
 <a href="#">Site Name</a>
</h1>
<canvas></canvas>
</body>
</html>

coothead

Thank you coothead,

I’ll give it a try.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.