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

-1

У меня есть очень простая веб-страница, используя приведенный ниже код. Заглавный блок позволяет прокручивать, чего я не хочу. Я уверен, что это будет мой плохой код HTML. Может ли кто-нибудь указать, что не так, вызвав свиток? Код фактически используется внутри tasker для android внутри веб-элементов сцены. Как остановить блок HTML, позволяющий пропустить прокрутку

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

источник

2014-11-09 Valiceemo

Пожалуйста, объясните вашу проблему дальше и сообщите, что вы использовали browswer? –

Просьба привести пример или использовать http://jsfiddle.net – Hbirjand

Спасибо за ответы, но я все равно получаю нежелательную прокрутку? – Valiceemo

Внимание: Если вы используете высоту: 100%; или ширина: 100%; (и вы должны избегать использования этого, блоки автоматически берут все горизонтальное пространство, которое они могут), не используйте прокладку.

Заполнение и границы не являются частью указанной ширины и высоты, поэтому ваш h1 фактически составляет 100% + 20px height.

Пример с шириной: http://codepen.io/Manumanu/pen/ryhaC

Вот почему вы получите свиток: Вы можете использовать высоту + отступы + запас (h1 имеет автоматические поля), так что это определенно выше, чем вид.

Вы также должны применить свой фон к телу, он не имеет смысла на h1.

Таким образом, ваш код должен быть таким:

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title></title> 
 
\t \t <style> 
 
\t \t \t html, body { 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t background: #03a9f4; 
 
\t \t \t } 
 

 
\t \t \t .otto { 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t font: bold 20px Roboto; 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t line-height: 1.5em; 
 
\t \t \t \t color: white; 
 
\t \t \t \t text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1 class="otto">Enter fuell fill up date</h1> 
 
\t </body> 
 
</html>

Но теперь эта точка установлена, то, что вы пытались сделать? Просмотр исходного кода, не пытались ли вы вертикально выровнять h1 в представлении?

Если да, то это, как вы идете по ней:

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title></title> 
 
\t \t <style> 
 
\t \t \t html, body { 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t background: #03a9f4; 
 
\t \t \t \t text-align: center; 
 
\t \t \t } 
 

 
\t \t \t .otto { 
 
\t \t \t \t font: bold 20px Roboto; 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t line-height: 1.5em; 
 
\t \t \t \t color: white; 
 
\t \t \t \t text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); 
 
\t \t \t } 
 

 
\t \t \t .strut, .otto { 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t vertical-align: middle; 
 
\t \t \t } 
 

 
\t \t \t .strut { 
 
\t \t \t \t height: 100%; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="strut"></div><!-- 
 
\t \t --><h1 class="otto">Enter fuell fill up date</h1> 
 
\t </body> 
 
</html>

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

источник

2014-11-09 12:29:58 EmmanuelB

Спасибо. Это дает мне точные результаты, которые я хочу. Объяснение было бы большим, я все еще очень учусь. Я не уверен, что понимаю часть .strut. И диаграммы? – Valiceemo

Хорошо. Ключ - это поведение встроенного блока с вертикальным выравниванием: http://uploads.siteduzero.com/files/363001_364000/363431.png Он позволяет выравнивать элемент из собственного центра, возвращаясь к его элементам брата и сестры. Итак, если у вас есть элемент (.strut), который составляет 100% высоты, вы можете иметь центр экрана: http://uploads.siteduzero.com/files/366001_367000/366329.png .strut пуст (0px wide) и невидимым, но отображает этот контекст форматирования. См. между .strut и .otto: Это необходимо для устранения проблемы с пробелом. Http://goo.gl/U06R6e – EmmanuelB

OK спасибо большое. Я постараюсь обнять голову. – Valiceemo

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

.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-09 11:59:17

Есть некоторые ошибки в HTML, которые вы хотели бы исправить первым. Браузер сделает все возможное, чтобы попытаться показать страницу в любом случае, но это, скорее всего, заставило браузер работать в режиме quirks, который в основном пытается быть совместимым с самым старым браузером.

У вас есть комментарий с неправильным концовкой разделителем --!> вместо -->
У вас есть 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 в стиле sh EET также, но это только для того, чтобы сделать код более приятным для работы.

источник

2014-11-09 12:01:47 Guffa

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

ответ

Смежные вопросы