How do i stop a HTML block allowing unwanted scrolling

I have a very basic web page using the below code. The title block is allowing scrolling which I do not want. I'm certain it will be my poor HTML code. Could anyone point out what is wrong causing the scroll? The code is actually being used inside tasker for android inside a scene web elemen .

<!--full page style--!>
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
</body>

<style type="text/css">

.otto { 
text-align: center; 
font: bold 20px Roboto;
padding: 10px 0;     
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}

</style>

<h1 class="otto">Enter fuel fill up date</h1>

</head>
</html>

Solution

Caution : If you use height: 100%; or width: 100%; (and you should définitely avoid using this one, blocks are automatically taking all the horizontal space they can), don't use padding.

Padding and borders aren't part of specified width and height, so your h1 is actually 100% + 20px height.

Example with width : http://codepen.io/Manumanu/pen/ryhaC

This is why you get the scroll : You use height + padding + margin (h1 has automatic margins), so it's definitely taller than the view.

You should also apply your background to body, it has no sense on h1.

So, your code should be like this :

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				background: #03a9f4;
			}

			.otto {
				text-align: center;
				font: bold 20px Roboto;
				margin: 0;
				line-height: 1.5em;
				color: white;
				text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
			}
		</style>
	</head>
	<body>
		<h1 class="otto">Enter fuell fill up date</h1>
	</body>
</html>

But now this point is set, what were you trying to do ? Viewing your initial code, didn't you try to vertically align your h1 in the view ?

If so, this is how you go for it :

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				background: #03a9f4;
				text-align: center;
			}

			.otto {
				font: bold 20px Roboto;
				margin: 0;
				line-height: 1.5em;
				color: white;
				text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
			}

			.strut, .otto {
				display: inline-block;
				vertical-align: middle;
			}

			.strut {
				 height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="strut"></div><!--
		--><h1 class="otto">Enter fuell fill up date</h1>
	</body>
</html>

Tell me if explanations are needed about this.