Question

我有一个使用以下代码的非常基本的网页。标题栏允许滚动，我不想要。我确定这将是我糟糕的HTML代码。任何人都可以指出导致滚动的错误吗？该代码实际上是在一个场景web元素内部的android任务器中使用。

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

Answer 1

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

＆＃13;

.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)
}

＆＃13;

<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
  <h1 class="otto">Enter fuel fill up date</h1> 
</body>

＆＃13;

Answer 2

您希望首先修复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标记的样式，但这只是为了使代码更好用。

Answer 3

注意：如果你使用身高：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>

告诉我是否需要解释此事。

如何停止允许不必要滚动的HTML块

3 个答案: