CSS包装器div高度：100％不覆盖整页高度

Question

如果div中没有​​足够的内容=＆＃34;内容＆＃34;红色包装器填充100％，但是当内容变长时，红色包装器不会填满100％的屏幕高度，内容div会溢出。

代码：http://codepen.io/anon/pen/JAbuq

这是要演示的图像，将浏览器的大小调整到较小的高度。我需要这个用于移动浏览器显示。

Answer 1

使用min-height: 100%代替height: 100%以允许包装器超出浏览器视口高度：

#content-wrapper {
  width: 100%;
  float: none;
  position: absolute;
  box-shadow: none;
  overflow: visible;
  min-height: 100%;
  background: red;
}

演示：http://codepen.io/anon/pen/niCfJ/

Answer 2

这是因为您的内容包装器是WINDOW大小的100％，而不是内容。当内容大于窗口时，它会超出包装器。

在#content-wrapper中将高度更改为最小高度将解决此问题：

http://codepen.io/anon/pen/mazBd/

Answer 3

由于填充和边距，白色容器熄灭。身体有一些初始边际。我改变了它，看看http://codepen.io/anon/pen/eiocy/