Raphael 100% бумага дает мне вертикальную полосу прокрутки

Question

Я использовал библиотеку Raphael и столкнулся с нечеткой проблемой.

В моем тестовом HTML содержится только div с идентификатором «main». Мой CSS просто-

* { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
} 
body, html { 
    height: 100%; 
    width: 100%; 
} 
#main { 
    height: 100%; 
    width: 100%; 
} 

Я могу добавить больше материала в HTML без появления прокрутки. Но, как только я добавлю -

var paper = Raphael("main", "100%", "100%"); 

Я получаю вертикальную полосу. Кто-нибудь знает, почему? Если я установил его на «98%», он исчезнет, ​​и я готов принять это как быстрое и грязное обходное решение, но мне нравится знать причину всего. Плюс, кто знает, как это будет реагировать на разные платформы.

Answer 1

Человек, я действительно не мог понять, «почему»!

Но я создал скрипку с вашей проблемой (http://jsfiddle.net/Z8dYT/), и, окрашивая div и тело, можно увидеть, что div по-прежнему является правильной высотой. Просто тело немного переполнено.

Если это нормально, просто добавьте overflow:hidden к телу, и все будет в порядке. В противном случае, по крайней мере, я надеюсь, что скрипка будет полезна =)

Answer 2

Я предполагаю, что это может быть проблема с коробкой. Попробуйте следующее:

#main { 
    box-sizing: border-box; 
} 

Jsfiddle помогает, кстати, так много. http://jsfiddle.net/