Как я могу удалить лишнюю высоту html5 canvas? - PullRequest
12 голосов
/ 24 января 2011

Я тестировал элемент холста html5 и хотел, чтобы мой холст был в полноэкранном режиме в области отображения.Но я обнаружил, что, если я установлю высоту холста в window.innerHeight, будет показана полоса прокрутки.Я попробовал и нашел, что нужно установить высоту на 5 пикселей меньше, полоса прокрутки исчезнет, ​​но, к сожалению, она оставила белую рамку под холстом.Если это элемент div, все в порядке.

Код, который я использую для проверки:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function load() {
    var o = document.getElementById('canvas');
    if (o) {
        o.width = window.innerWidth;
        o.height = window.innerHeight - 5;
    }
    o = document.getElementById('div');
    if (o) {
        o.style.width = window.innerWidth + 'px';
        o.style.height = window.innerHeight + 'px';
    }
}
</script>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: white;
}
#canvas {
    background-color: blue;
}
#div {
    background-color: green;
}
</style>
</head>
<body onload="load();">
<canvas id="canvas"></canvas>
<!--div id="div"></div-->
</body>
</html>

Я очистил поля тела и отступы.

Я тестирую его на Chrome 8.0.552, и он также работает на Firefox 3.6.13, но на 4 пикселя это нормально.

Что-то я пропустил?Любые предложения будут по достоинству оценены.Большое спасибо.

1 Ответ

18 голосов
/ 24 января 2011

По умолчанию canvas, в отличие от div, равно display: inline;, поэтому устанавливается vertical-align: baseline;.Вы можете использовать любой из следующих подходов, чтобы естественным образом заполнить window.innerHeight:

#canvas {
    background-color: blue;
    vertical-align: top;
}

или:

#canvas {
    background-color: blue;
    display: block;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...