Неожиданная полоса прокрутки

Как выглядит вертикальная полоса прокрутки, видимая с этим HTML-файлом?Неожиданная полоса прокрутки

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style> 
    html, body {border:0; margin:0; padding:0; height:100%} 
    h1 {margin:1em} 
    </style> 
</head> 
<body> 
    <h1>Test</h1> 
</body> 
</html>

(или это jsFiddle)

Тело имеет точно такую же высоту, как и окна, очевидно. Итак, что делает контент больше? Что мне не хватает?
(Испытано с IE, FF, хром.)

источник

2012-03-06 Mr Lister

'Макс-height' вместо' height' решить это. – Joey

Это поведение называется «collapsing margins». Поскольку ваш элемент h1 является первым дочерним элементом body, он пытается свернуть маржу с ним, а поле h1 заканчивается в теге body. Поскольку body уже на 100%, добавленный запас сделает его больше, чем область просмотра.

Read more on collapsing margins on w3c

источник

2012-03-06 07:57:07 Bazzz

Но ... но ... это рушится, делает маржу на теле _больше? _ Ох. Я вижу, что мне нужно прочитать определение «коллапс». Спасибо, в любом случае. –

Да, это так, поэтому он дает результат, которого вы не ожидали. :) Поля фактически перемещаются в элемент body. – Bazzz

использовать это:

html {border:0; margin:0; padding:0; height:100%} 
     body {border:0; margin:0; padding:0}

источник

2012-03-06 07:48:44 SNAG

удалить height: 100% или добавить overflow: hidden. Но будьте осторожны - 100% означает только 100% вашего начального экрана.

источник

2012-03-06 07:49:06 mkk

Нет, я не хочу, чтобы переполнение было скрыто; для содержимого документа требуется полоса прокрутки, если содержимое на самом деле больше окна. И удаление высоты испортит фон, если содержимое будет меньше. Но спасибо за помощь! –

Ваш h1 элемент вверху margin рассчитывается сверху.

В этом примере вы можете использовать padding.

источник

2012-03-06 07:49:16 alex

Я думал, что знаю, как работают расчеты. И так как h1 находился внутри тела, и у тела не было никаких полей или отступов, я думал, что h1 не может повлиять на тело. Видимо, я был неправ. –

Маржа - это промежуток между текущим элементом и следующим элементом с отступом/границей/границей. Я не знаю, кто проиграл, но не стесняйтесь оставлять комментарий, и я объясню, что вы не должны понимать. – alex

Поля на вашем элементе h1 расширяют содержание вашего тела, которое уже составляет 100% от высоты. Превышение 100% высоты вызывает свиток.

источник

2012-03-06 07:49:52 kinakuta

Неожиданная полоса прокрутки

ответ

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