Javascript 在HTML/CSS中为画布提供相等的最大高度和宽度

我正在尝试为我的web应用设置布局。我想有2个画布，以填补大部分的窗口和底部的4个图像按钮以下是我努力实现的目标：

但我在浏览器里把一切都搞糟了。画布很小！无论我在CSS文件中放置的是跳水的高度或宽度，还是画布本身。我希望他们是理想的800x600和调整相同的比例，如果窗口正在调整大小

以下是我的HTML和CSS：

正文{
保证金：0；
}
标题{
保证金：0；
背景色：#DC0A2F；
高度：50px；
}
标题img.logo{
宽度：150px；
高度：自动；
填充：13px 13px 0px 13px；
}
标题a{
颜色：白色；
文字装饰：无；
浮动：对；
填充：15px；
字体系列：Consolas；
字重：还原；
}
标题a：悬停{
填充顶部：16px；
}
html，
身体{
身高：100%；
}
主要{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
高度：90vh；
}
主索引{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
颜色：#888888；
}
主菜单{
宽度：250px；
高度：自动；
填充：50px；
}
桌子{
字体大小：130%；
}
th{
背景色：#888888；
边框颜色：白色；
}
运输署{
背景色：白色；
边框底部：实心1px#8888888；
右边框：实心1px#8888888；
}
img.index{
宽度：400px；
高度：自动；
}
艾尔格布尼斯先生{
利润率：50像素；
}
svg.header{
宽度：125px；
高度：30px；
边缘顶部：10px；
}
沃肖先生{
利润率：100像素；
}
画布{边框：1px纯黑色；背景色：红色；}
.FootReviewContainer{
高度：800px；
文本对齐：居中；
}
#预览说唱歌手{
显示：表格；
表布局：固定；
宽度：100%；
高度：自动；
背景色：仿古白色；
}
#说唱歌手组{
显示：表格单元格；
高度：自动；
}
#左画布#右画布{
高度：800px；
宽度：600px；
边框：1px实心#中交；
背景色：#DC0A2F；
}
.预览按钮{
文本对齐：居中；
}

WebSocket回送客户端

最简单的解决方案是使用

显示：flex，并使用
vh
（查看高度）单位设置高度。默认设置将导致子画布拉伸以填充高度，然后您可以选择如何对齐它们。它们被设置为
justify content:space-around，它将子元素两侧的任意可用空间平均分割

#previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
}


正文{
保证金：0；
}
标题{
保证金：0；
背景色：#DC0A2F；
高度：50px；
}
标题img.logo{
宽度：150px；
高度：自动；
填充：13px 13px 0px 13px；
}
标题a{
颜色：白色；
文字装饰：无；
浮动：对；
填充：15px；
字体系列：Consolas；
字重：还原；
}
标题a：悬停{
填充顶部：16px；
}
html，
身体{
身高：100%；
}
主要{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
高度：90vh；
}
主索引{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
颜色：#888888；
}
主菜单{
宽度：250px；
高度：自动；
填充：50px；
}
桌子{
字体大小：130%；
}
th{
背景色：#888888；
边框颜色：白色；
}
运输署{
背景色：白色；
边框底部：实心1px#8888888；
右边框：实心1px#8888888；
}
img.index{
宽度：400px；
高度：自动；
}
艾尔格布尼斯先生{
利润率：50像素；
}
svg.header{
宽度：125px；
高度：30px；
边缘顶部：10px；
}
沃肖先生{
利润率：100像素；
}
画布{边框：1px纯黑色；背景色：红色；}
.FootReviewContainer{
高度：800px；
文本对齐：居中；
}
#预览说唱歌手{
高度：85vh；
显示器：flex；
证明内容：周围的空间；
}
帆布{
宽度：46vw；
}

WebSocket回送客户端
您只需添加一点css。我直接将其添加到样式内联，这样您就可以轻松地修复它

  <div id="previewWrapper" class="footPreviewContainer" style="display:flex; height:auto; max-height:600px;">
    <canvas id="leftCanvas" style="height:100%;width:800px;"></canvas>
    <canvas id="rightCanvas" style="height:100%;width:800px;"></canvas>
  </div>


WebSocket回送客户端