画布跨越整个页面
[英]Canvas to span entire page
问题描述
Building a website for my photography and I'm struggling to make the back ground canvas span the entire height of the page. 
为我的摄影建立一个网站，我正在努力使背景画布跨越页面的整个高度。 Also the stars inside the canvas become elongated sometimes - you have to refresh to make them the correct size. 此外，画布内的星星有时会变长 - 你必须刷新才能使它们成为正确的尺寸。
The html code for the canvas : 画布的html代码：
<body>
<canvas id="canvas"></canvas>
<header>
css code : css代码：
canvas {
position:absolute;
top:0;
left:0;
width:100%;
min-height: 100%;
z-index:-1;
background: #111;
}
Link to page: https://benjamintgibbs.github.io/benjaminAstro.github.io/ 链接到页面： https ： //benjamintgibbs.github.io/benjaminAstro.github.io/
Image: 图片：
3 个解决方案
解决方案1
2 已采纳 2017-04-15 14:59:44
Since you would like the canvas to serve as a background image. 因为您希望画布用作背景图像。 why not position the element fixed to the screen? 为什么不将元素固定在屏幕上？
example position:fixed (you have already set width and height of 100%) 示例position:fixed （您已经设置宽度和高度为100％）
#canvas{
position: fixed;
}
解决方案2
1 2017-04-15 15:11:45
In your CSS, change the following: 在CSS中，更改以下内容：
.container {
width: 100%;
/* position: relative; */
top: 60px;
padding-right: 70px;
padding-left: 60px;
/* padding-bottom: 30px; */
}
Having the position of your container be relative and the padding bottom is creating the whitespace at the bottom. 使容器的位置是相对的，并且填充底部在底部创建空白。
解决方案3
0 2017-05-22 23:52:29
In answer to the elongated stars - I added a load function at the beginning of my JS: 回答细长的星星 - 我在JS的开头添加了一个加载函数：
window.onload = function() {
// canvas shiz
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.