Question

所以我有一张chartist.js图表，我不想填满整页。问题是，它应该只相对于父容器填充高度。因此，如果我将sibling div添加到图表div中，它仍然不会溢出窗口大小。

继承我的HTML和javascript：

<div class="container fill">
  <div><h1>My Chart</h1></div>
  <div class="ct-chart ct-perfect-fourth my-chart"></div>
</div>

<script>
  var data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
      [5, 2, 4, 2, 0]
    ]
  };

  new Chartist.Line('.ct-chart', data);
</script>

这是我的CSS：

html {
  height: 100%;
  background-color: blue;
}

body {
  height: 100%;
  background-color:pink;
}

.fill {
  min-height: 100%;
  height: 100%;
  background-color: green;
}

.my-chart {
  height: 100%;
  min-height: 100%;
  background-color:yellow;
}

如果我删除了h1 div，我会得到我想要的行为，但我也希望将H1置于其上，并且仍然表现相同（不会在屏幕下方溢出）我如何实现这一目标？我试过改变每个div的定位，但没有任何运气。我想我在这种情况下缺少定位如何工作的细节？

Answer 1

您可以使用flex来帮助保持所有内容：https://jsfiddle.net/dckuLxyf/4/

html {
  height: 100%;
  background-color: blue;
}

body {
  height: 100%;
  background-color:pink;
}

.fill {
  min-height: 100%;
  height: 100%;
  background-color: green;
  display:flex;
  flex-flow:column;
}

.my-chart {
  flex:1 1 0;
  overflow:hidden;
  background-color:yellow;
}

Chart Div 100％窗口高度

1 个答案: