我正在测试html5 canvas元素,并希望我的画布在显示区域全屏显示.但我发现如果我将画布高度设置为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个像素更少.
我错过了什么？任何建议将非常感谢.非常感谢.
rob*_*rtc 18
默认情况下canvas,不像div,是display: inline;因此它被设置为vertical-align: baseline;.您可以采取以下任一方法使事情自然地填充window.innerHeight:
#canvas {
background-color: blue;
vertical-align: top;
}
要么:
#canvas {
background-color: blue;
display: block;
}
| 归档时间： |
|
| 查看次数： |
3987 次 |
| 最近记录： |