如何css样式灵活的元素来匹配他们的父母

Question

在此jsfiddle中说明：

我想要的是在网站中央有一个圆角的画布，当你放大窗口时它会变大，当你收缩时会变小。然而，我的帆布容器和我的画布似乎都无法伸展它们的全部容量。我做错了什么？

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

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

.box .row.footer {
  flex: 0 1 40px;
}

#canvas_container {
  border: 1px solid #aaa;
  border-radius: 15px;
  overflow: hidden;
  min-height:100px;
  min-width:100px;
  height: 100%;
}
#canvas {
  background: #f80;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content"> 
    <div id="canvas_container">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

content div已经弯曲以适应。因此，对absolute相对于canvas-container使用位置content就足够了，并删除min-width和min-height以及你去的地方！

.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;
}

让我知道您对此的反馈。谢谢！

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

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

.box .row.footer {
  flex: 0 1 40px;
}

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

＆＃13;

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content"> 
    <div id="canvas_container">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我假设您的项目是JSFiddle中显示的项目（因为您提供的CSS与JSFiddle不同）。添加它应该解决它：

#canvas_container {
  height: 100%;
}

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

Answer 3

尝试添加代码

#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%;
}
*/