虽然最小高度为div，但当内容增长到大时，100％不会扩展

Question

这是一个具有一般问题的codepen： https://codepen.io/tgreen/pen/PJbPEB

.canvas {
   padding: 40px;
   max-width: 1170px;
   width: 100%;
   align-self: center;
   min-height: 100%;
   background: white;
   display: flex;
   justify-content: center;
}

我希望画布以100％的最小高度开始，因此它会填满整个浏览器窗口，但是如果它的内容比那个大，那么它也应该增长到包含它。基本上我希望白盒子一直到达底部。

感谢。

Answer 1

将百分比值切换为基于vh的值，

Here is a working demo

这是因为百分比值是相对于父容器的，而您尝试实现的是相对于视口大小（您可以简单地将height: 100%属性的html, body替换为{{1但是，如果红色框很小，那么canevas不会占用100％的页面，它只会适应它。

Answer 2

只需从body中删除height属性，html

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