Html 响应画布保持100%的分区/屏幕大小

我有一个响应画布，可以根据div中的屏幕窗口调整大小。页面上有一个顶部菜单导航栏，作为引导的一部分。画布应为1100x1100，但应根据屏幕大小调整大小和比例。画布应保持相同的纵横比（正方形）

但是，画布在屏幕下方展开，而不是填充div大小。可能是因为上面的菜单。还值得注意的是，navmenu可以折叠或隐藏，因此它可能并不总是存在，这使得很难强制画布将x像素的大小调整得更低

如何解决这个问题，使画布适合屏幕，而无需滚动？这是CSS解决方案还是Javascript

如果尝试将CSS宽度/高度设置为100%以下，则可以看到它不再是正方形，但仍在“高度”视口下方运行。我希望它保持正方形。（请注意，您需要单击整个页面以查看此演示）

//初始化画布
var canvas=document.getElementById（“myCanvas”）；
画布宽度=1100；
画布高度=1100；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#4A4E69”；
$idolCanvas=$（“#我的画布”）；
//初始化拖动功能
var IsDraging=错误；
var-startX；
var startY；
//偶像阵列
var idols=[]；
var NUM_IDOLS=0；
//触发偶像加载
对于（var i=0；i要保持正方形，您可以在
resize
和
ready
事件中添加eventListener，在该事件中，您可以检查屏幕宽度和高度，并相应地设置画布尺寸

比如：

const adjustCanvasHeight=（）=>{
设maxSize=$（window.width（）；
const othersizesthatchangehight=$（'nav'）.height（）+16//16px自正文边距；
if（$（窗口）.height（）-otherSizesThatChangeHeight

此代码将画布的宽度和高度设置为窗口宽度或高度（取决于哪个较小），以防止其超出您的窗口，并将保持正方形

下面是完整的代码片段


//初始化画布
var canvas=document.getElementById（“myCanvas”）；
画布宽度=1100；
画布高度=1100；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#4A4E69”；
$idolCanvas=$（“#我的画布”）；
//初始化拖动功能
var IsDraging=错误；
var-startX；
var startY；
//偶像阵列
var idols=[]；
var NUM_IDOLS=0；
//触发偶像加载
对于（var i=0；i{
设maxSize=$（window.width（）；
让othersizesthatchangehight=$（'nav'）.height（）+16；//16px自正文边距
if（$（窗口）.height（）-otherSizesThatChangeHeight对于（var i=0；i使用视图宽度-
100vw
，视图宽度相对于视图端口…是否为画布设置了宽度：100%，高度：100%，而不仅仅是maxwidth/Heights删除绝对位置的内联样式，并将宽度设置为100%，只要它是块级元素，就应该跨越其父元素的宽度。您说画布是“本应为”1000x1000-即方形-但您希望它保持方形还是水平和垂直填充屏幕上剩余的内容？@AHaworth是的，对不起。它应保持方形，我用这个更新了问题。