Html 如何使用css样式灵活的元素来匹配它们的父元素

如图所示：

我想要的是一个在网站中心有圆角的画布，当你放大窗口时它会变大，当你缩小时它会变小。然而，无论是我的画布容器还是画布似乎都无法完全伸展。我做错了什么

html，
身体{
身高：100%；
保证金：0
}
.盒子{
显示器：flex；
柔性流动：柱；
身高：100%；
}
.包厢{
边框：1px点灰色；
}
.box.row.header{
flex:01自动；
}
.box.row.content{
利润率：20px；
flex:1自动；
}
.box.row.footer{
flex:01140px；
}
#帆布集装箱{
边框：1px实心#aaa；
边界半径：15px；
溢出：隐藏；
最小高度：100px；
最小宽度：100px；
身高：100%；
}
#帆布{
背景：#f80；
宽度：100%；
身高：100%；
}

标题



（根据内容调整大小）

页脚（固定高度）

我在这里假设您的项目是JSFIDLE中显示的项目（因为您提供的CSS与JSFIDLE不同）。添加此选项可以解决此问题：

#canvas_container {
  height: 100%;
}

#canvas {
  height: 100%;
  width: 100%;
}

尝试添加代码

#canvas_container {
    border: 1px solid #aaa;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

#canvas {
    background: #f80;
    display: inherit;
    width: 100%;
    height: 100%;
}

/* or
#canvas {
    background: #f80;
    display: inherit;
    position: relative;
    border-radius: 15px;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
}
*/

---

content

div已经进行了调整。因此，对于

画布容器

相对于

内容

使用位置

绝对

，并移除

最小宽度

和

最小高度

就足够了

.box .row.content {
  margin: 20px;
  flex: 1 1 auto;
  position: relative;
}

#canvas_container {
  border: 1px solid #aaa;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
}

让我知道你对此的反馈。谢谢

html，
身体{
身高：100%；
保证金：0
}
.盒子{
显示器：flex；
柔性流动：柱；
身高：100%；
}
.包厢{
边框：1px点灰色；
}
.box.row.header{
flex:01自动；
}
.box.row.content{
利润率：20px；
flex:1自动；
位置：相对位置；
}
.box.row.footer{
flex:01140px；
}
#帆布集装箱{
边框：1px实心#aaa；
边界半径：15px；
溢出：隐藏；
身高：100%；
宽度：100%；
位置：绝对位置；
}
#帆布{
背景：#f80；
宽度：100%；
身高：100%；
}

标题



（根据内容调整大小）

页脚（固定高度）

使用CSS调整大小时，为避免扭曲（拉伸和挤压）现有画布内容，必须始终按相同的比例因子调整宽度和高度。因此，如果将画布的原始宽度增加一倍，则必须同时将画布高度增加一倍，否则内容将被扭曲。@markE您能告诉我如何使用JS实现这一点吗？为了避免在使用CSS调整大小时扭曲（拉伸和挤压）现有画布内容，您必须始终按相同的比例因子调整宽度和高度。因此，如果将画布的原始宽度增加一倍，则必须将画布高度增加一倍，否则内容将被扭曲。为避免在使用CSS调整大小时扭曲（拉伸和挤压）现有画布内容，必须始终按相同的比例因子调整宽度和高度。因此，如果将画布的原始宽度加倍，则必须将画布高度加倍，否则内容将失真。