I am utilizing three.js to render content onto a canvas. My goal is to have a div element positioned above the canvas and another below it, with the canvas filling the space in between. The total height of these 3 elements should always be 100% of the viewport without exceeding it and causing scrollbars to appear, even if this means adjusting the aspect ratio of the canvas when the viewport size changes.
To illustrate what I am aiming for, here is a gif demonstrating the desired layout:
https://i.sstatic.net/SDsNw.gif
I initially thought that using flexbox would solve this layout challenge, but my attempts have not been successful. Scrollbars keep appearing or the bottom element ends up outside the viewport. You can see one of my attempts by running the code snippet in full page mode:
// JavaScript code
const canvas = document.querySelector('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
const scene = new THREE.Scene();
// More code...
// CSS code
html, body {
height: 100%;
margin: 0;
}
// More code...
<div class="container">
<div class="top">Top</div>
<div class="middle">
<canvas></canvas>
</div>
<div class="bottom">Bottom</div>
</div>
// More HTML code...
If you change the flex-direction to row, you'll notice that the layout works horizontally as intended. However, my goal is to achieve the same result vertically. Is there a way to make this happen?