Я тестировал элемент холста 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 пикселя меньше.
Что я пропустил? Любые предложения будут действительно оценены. Большое спасибо.