Как остановить блок HTML, разрешающий нежелательную прокрутку

У меня есть очень простая веб-страница с использованием приведенного ниже кода. Блок заголовка позволяет прокручивать, что я не хочу. Я уверен, что это будет мой плохой HTML-код. Кто-нибудь может указать, что не так, вызывая свиток? Код на самом деле используется внутри Tasker для 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>
Источник

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>

Скажите, нужны ли объяснения по этому поводу.

Источник

Я только убрал это! попробуйте это: все в порядке.

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

Источник

Есть некоторые ошибки в 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 тег в таблице стилей также, но это просто, чтобы сделать код лучше работать.

Источник
Другие вопросы по тегам