i want the canvas to fill the whole webpage under the heading, maybe with a small margin between the edge of the canvas and the edge of the window. but i can’t get it to fill the screen and now the title is next to it instead of above it. any help is appreciated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shark?</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
canvas {
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="container">
<h1>shark?</h1>
<canvas></canvas>
</div>
</body>
</html>
2
Answers
One way to achieve this is to use
flex-direction: column;
(https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) on the.container
and then add a width to yourcanvas
. The 90vw unit means set the width to "effectively" 90% the width of the viewport. Set that value to what you want.Also remove
justify-content: center;
from your.container
to achieve the desired result.Adding the property
flex-direction: column;
to the container class to arrange the elements vertically.