Почему полосы прокрутки появляются, когда высота, поля и отступы составляют до 100%? - PullRequest
Новая
       18

Почему полосы прокрутки появляются, когда высота, поля и отступы составляют до 100%?

2 голосов
/ 28 февраля 2012

Я не понимаю, почему мой первый div (#a) имеет вертикальную полосу прокрутки в этом тесте: 

*, html, body
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

#a
{
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    overflow: auto;
    background-color: indianred;
}
#b
{
    display: inline-block;
    position: relative;
    height: 90%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 0;
    width: 100%;
    background-color: grey;
}

<div id="a">
    <div id="b">TEST</div>
</div>

Также см. http://dabblet.com/gist/1933615.

На мой взгляд, мой внутренний div (#b) должен занять 100% (90% + 5% + 5%), а у #a не должно быть полосы прокрутки. Но похоже, что #b забирает 101%.

Что здесь происходит?

Ответы [ 2 ]

0 голосов
/ 28 февраля 2012

Я думаю, что это связано с округлением пикселей.

Ваше правило состоит в том, что #b занимает 90% от #a и имеет запас в верхней части 5% и запас в нижней части еще 5%. Вы думаете, что это будет на 100%, верно? ;)

Запустил два сценария и проверил в Firebug, что Firefox делал с этими значениями. 

Scenario 1 - #a is 600px tall
#b height = 540px
#b margin-top = 30px
#b margin-bottom = 30px
540 + 30 + 30 = 600px === #a's height

Scenario 2 - #a is 601px tall
#b height = 541px (601 * .9 = 540.9 -> rounded up by browser = 541)
#b margin-top = 31px (601 * .05 = 30.05 -> rounded up = 31)
#b margin-bottom = 31px 
541 + 31 + 31 = 603px > 601px -> #a's height

Кстати, если вы смотрите на разрешение, в котором все пропорции дают хорошие круглые числа, полос прокрутки нет.

Если вы хотите увидеть это визуально и иметь доступ к Firebug, откройте вкладку Layout (sub) (когда выбрана вкладка HTML). (Я уверен, что вы можете проанализировать его аналогичным образом с помощью Firebug Lite, инструментов Chrome dev и инструментов IE dev)

Надеюсь, это поможет. ISO

0 голосов
/ 28 февраля 2012 
#a
{
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    overflow: auto;
    background-color: indianred;
}
...