-1

以下のコードを使用した非常に基本的な Web ページがあります。表題欄で、望ましくないスクロールが許可されています。私はそれが私の貧弱なHTMLコードになると確信しています. 誰かがスクロールの原因を指摘できますか? このコードは、実際にはシーン web 要素内のタスカー for 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>
4

3 に答える 3

0

注意 : 高さを使用する場合: 100%; または幅: 100%; （そして、これを使用することは絶対に避けるべきです。ブロックは、可能な限りすべての水平方向のスペースを自動的に占有します）、パディングを使用しないでください。

パディングとボーダーは指定された幅と高さの一部ではないため、h1 は実際には 100% + 20px の高さです。

幅のある例: http://codepen.io/Manumanu/pen/ryhaC

これがスクロールを取得する理由です。高さ + パディング + マージン (h1 には自動マージンがあります) を使用するため、ビューよりも確実に高くなっています。

また、背景を body に適用する必要があります。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 に答える
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

さっさと片付けました！これを試してください：すべて問題ありません。

.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 に答える