-1

我有一个使用以下代码的非常基本的网页。标题栏允许我不想要的滚动。我确定这将是我糟糕的 HTML 代码。谁能指出导致滚动的错误原因？该代码实际上是在 tasker for android 内的场景 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>
4

3 回答 3

0

我刚刚整理了一下！试试这个：一切都很好。

.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)
}
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
  <h1 class="otto">Enter fuel fill up date</h1> 
</body>

于 2014-11-09T11:59:17.220 回答
0

HTML 中有一些错误需要先修复。浏览器无论如何都会尽最大努力尝试显示页面，但这很可能导致浏览器以怪异模式工作，这基本上是为了尝试与可以想象的最古老的浏览器兼容。

  • 您的评论使用了错误的结束分隔符--!>，而不是-->
  • 你有body元素里面的head元素

如果您解决了这个问题，您最终会得到以下代码：

<html>
<head>

<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>

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

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

</body>
</html>

您可能还希望将body标记的样式也放在样式表中，但这只是为了使代码更易于使用。

于 2014-11-09T12:01:47.067 回答
0

注意：如果使用高度：100%；或宽度：100%；（你应该绝对避免使用这个，块会自动占用它们可以的所有水平空间），不要使用填充。

填充和边框不是指定宽度和高度的一部分，因此您的 h1 实际上是 100% + 20px 高度。

宽度示例：http ://codepen.io/Manumanu/pen/ryhaC

这就是为什么你得到滚动：你使用高度+填充+边距（h1具有自动边距），所以它肯定比视图高。

您还应该将背景应用于身体，它在 h1 上没有意义。

所以，你的代码应该是这样的：

<!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>

但是现在这一点已经确定，你想做什么？查看您的初始代码，您没有尝试在视图中垂直对齐 h1 吗？

如果是这样，这就是你的方式：

<!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>

告诉我是否需要对此进行解释。

于 2014-11-09T12:29:58.233 回答