Estoy buscando configurar una página html en la que muestre algo de texto y un lienzo html. El texto iría por encima del lienzo y algún texto extra podría ir a un lado. Respectivamente, A y B en este diagrama .
Se preferiría una solución que solo use css, pero no tengo ningún problema en usar js. Se puede suponer que el texto será lo suficientemente corto como para que no sea necesario desplazarse.
Experimenté un poco con js y obtuve el tamaño de la ventana gráfica (código a continuación), pero el lienzo va más allá de la ventana gráfica. Y eso se debe a las reglas existentes para los márgenes. Probablemente pueda hacer algunas matemáticas con márgenes y ese tipo de cosas, pero quiero evitar eso, ya que sería más complicado si la página progresara más tarde hacia un diseño más complicado.
problem.html : <html> <head> <meta charset="utf-8"> <script src="problem.js"></script> </head> <body> <h1>Some fancy title</h1> <canvas id="my-canvas"></canvas> </body> </html>problem.js : window.addEventListener('DOMContentLoaded', () => { const ctx = document.getElementById('my-canvas').getContext('2d'); // https://stackoverflow.com/a/28241682/2923526 const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ctx.canvas.width = width ctx.canvas.height = height ctx.fillStyle = "#7fdbbb" ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) })Puede intentar encapsular el lienzo en un flexbox :
<div style="display:flex; flex-direction:column; height:100%;"> <div style="display: flex; flex: 0 1 auto;">Some fancy title</div> <div style="display: flex; border:1px solid red; width:100%; flex: 1 1 auto;"> <canvas id="my-canvas" width="100%" height="100%"></canvas> </div> </div> <div style={{ display: 'grid', height: '100vh' }} > <p> upper text ..... </p> <div style={{ display: 'flex' }} > <p> side text of image </p> <div style={{ height: '100vh' }}> html canvas codes... </div> </div> </div>este fragmento de código puede crear el diseño que desee.