我正在创建一个基于Windows95绘画窗口的网站布局，我想知道是否有一种方法可以让我扩展内部div，同时保持外部div的比例相同。
我有一个外部“窗口”（包含所有内容的主 div）、一个标题栏、选项卡、调色板和底部，我想将其保留在原处，而内部“画布”则展开，因为这是其中主页内容将会消失。
我对页面的顶部和左侧没有问题，因为顶部扩展得很好，左侧不需要移动，但内部画布的底部和宽度没有按照我想要的方式移动。
本质上，我希望底部 div 被“锁定”到框的最底部，而画布随着窗口大小的调整而扩展。我有一个 codepen here 和我的代码，所以我希望你能明白我的意思。我还包括了我认为有问题的部分。 （如果我应该以其他方式显示我的代码，请告诉我！我对在这里提出问题还很陌生，并且确实发现这个网站有点令人困惑。我似乎也无法找出如何在这里有很多问题？）
#paintbox {
display: inline-block;
position: absolute;
max-width: 900px;
max-height: 600px;
border-right: grey 1px solid;
outline: white 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px #dedfde solid;
border-left: 1px #dedfde solid;
border-bottom: 1px black solid;
background-color: #bdbebd;
z-index: 9;
top: 10px;
left: 0;
}
.resizable {
overflow: hidden;
resize: both;
min-width: 750px;
min-height: 517px;
}
.canvas {
display: block;
position: relative;
min-width: 600px;
left: 4px;
max-height: 400px;
outline: black 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px #7b7b7b solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px #7b7b7b solid;
background-color: white;
color: black;
margin-right: 7px;
overflow: hidden;
box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}
.canvastext {
left: 0;
top: 0;
padding-left: 5px;
padding-bottom: 25px;
padding-right: 20px;
margin-top: 4px;
min-width: 600px;
max-height: 400px;
font-family: "w95a";
font-size: 1.5em;
overflow: scroll;
text-align: justify;
}
.palettearea {
display: inline-block;
position: relative;
width: 257px;
height: 62px;
left: 4px;
bottom: 0;
border-right: #bdbebd 1px solid;
}
我已经尝试过对我能想到的每个 div 进行各种显示和不同的宽度（最小和最大），但没有任何效果是我想要的:(我真的快要结束我非常有限的编码知识了并且不知道我做错了什么，我不认为父 div 会引起问题，因为我已经经历过并摆脱了我认为可能引起问题的任何最小或最大高度，但我假设这可能是非常简单的事情，或者根本没有办法做我想做的事情？