如何停止允许不需要滚动的 HTML 块答案

【问题标题】：How do i stop a HTML block allowing unwanted scrolling如何停止允许不需要滚动的 HTML 块
【发布时间】：2014-11-09 11:53:10
【问题描述】：

我有一个使用以下代码的非常基本的网页。标题栏允许我不想要的滚动。我确定这将是我糟糕的 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>

【问题讨论】：

请进一步解释您的问题并说明您使用的是哪个浏览器？
请提供示例或使用jsfiddle.net
感谢两位的回答，但我仍然得到不需要的滚动？

标签： html css tasker

【解决方案1】：

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

如果需要对此进行解释，请告诉我。

【讨论】：

谢谢。这给了我想要的确切结果。一个解释会很好，因为我还在学习。我不确定我是否理解 .strut 部分。图表呢？
好的。关键是垂直对齐的内联块行为：uploads.siteduzero.com/files/363001_364000/363431.png 它允许一个元素从它自己的中心对齐，引用它的兄弟元素。因此，如果您可以拥有一个高度为 100% 的元素 (.strut)，则您可以拥有一个屏幕中心：uploads.siteduzero.com/files/366001_367000/366329.png .strut 是空的（0px 宽）并且不可见，但会创建此格式化上下文。查看 .strut 和 .otto 之间的：这是为了避免空白问题goo.gl/U06R6e

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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 标记的样式也放在样式表中，但这只是为了使代码更易于使用。

【讨论】：