Fatal编程技术网
  • javascript/
  • Javascript 将元素高度设置为clientHeight导致页面滚动

Javascript 将元素高度设置为clientHeight导致页面滚动

javascript html css canvas

Javascript 将元素高度设置为clientHeight导致页面滚动,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我有一段代码： <!DOCTYPE html> <html lang="en"> <head> <script> window.addEventListener('load', () => { document.getElementById("c").width = document.documentElement.clientWidth;

我有一段代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>      
        window.addEventListener('load', () => {
            document.getElementById("c").width = document.documentElement.clientWidth;
            document.getElementById("c").height = document.documentElement.clientHeight;
        })
    </script>
  </head>
  <body style="margin: 0;">
    <canvas id="c" style="background-color: red;"></canvas>
  </body>
</html>


window.addEventListener（'load'，（）=>{
document.getElementById（“c”）.width=document.documentElement.clientWidth；
document.getElementById（“c”）.height=document.documentElement.clientHeight；
})
为什么它会生成比浏览器视口大的画布，并生成滚动条？除此之外，它在画布下方留下了一些空白。为什么以及如何解决？
谢谢

默认情况下，画布显示设置为
display:inline

您只需将画布显示设置为
display:block




window.addEventListener（'load'，（）=>{
document.getElementById（“c”）.width=document.documentElement.clientWidth；
document.getElementById（“c”）.height=document.documentElement.clientHeight；
})