我似乎无法折叠页面顶部和左侧的空白区域。我浏览了整个页面，检查了我的样式，并认为我在我的 js 中捕获了一切。我已将所有内容归零，但仍然无法正常工作。这是浏览器默认添加的东西吗？有人能告诉我我在这里缺少什么吗？谢谢!
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MAKECODEPLAY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//use.typekit.net/uwk8rac.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<style>
html {
background-color: "#555761";
background: "#555761";
}
body {
font-family: "brandon-grotesque";
font-wieght: 100;
font-style: normal;
color: #656771;
bgcolor: "#555761";
}
p {
font-family: "brandon-grotesque";
font-wieght: 100;
font-style: normal;
color: #656771;
}
a {
color: #555761;
}
a:link {
color: #555761;
text-decoration: none;
}
a:visited {
color: #555761;
text-decoration: none;
}
a:hover {
color: #656771;
text-decoration: none;
}
a:active {
color: #555761;
text-decoration: none;
}
/* Auto center content in window */
#stage {
width:100%;
margin: 0 auto;
padding: 0;
}
#stage canvas, #overlay {
position: absolute;
margin: 0 auto;
padding: 0;
}
#overlay {
margin: 0 auto;
padding: 0;
}
#overlay p {
color: #333;
font-family: "museo-sans";
font-weight: 900;
font-style: normal;
font-size: 14px;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.centered-bottom {
position: fixed;
bottom: 3%;
left: 50%;
transform: translate(-50%, -0%);
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="stage">
<canvas id="canvas"></canvas>
<div class="centered">
<img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"></div>
<div class="centered" style="margin-top:50px;">
<p>SITE COMING SOON</p></div>
<div class="centered-bottom">
<footer>
<small>© Copyright 2015, MAKECODEPLAY</small>
</footer>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
var makecodeplay = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
makecodeplay.fillStyle = "rgb(55,57,61)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
function randomPaint(inX, inY) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
var r, g, b;
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
makecodeplay.beginPath();
makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
makecodeplay.fill();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 10;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 4;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
makecodeplay.lineWidth = 1;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
setTimeout(function () {
randomPaint(x, y)
}, 100);
}
randomPaint(1, 1);
</script>
</body>
</html>
最佳答案
将此添加到 css。
html, body{
padding: 0;
margin: 0;
}
关于javascript - 无法摆脱页面上的顶部和左侧空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32109058/