Css .容器未覆盖整个高度

最好用截图解释一下，这是我的应用程序布局（rails）：

问题是：

标题下方的彩色bg是.main类，我想从标题向下覆盖整个站点。我真的不知道为什么它会被推到一个固定的高度。CSS:

/* Global Styles */
html,
body {
    height: 100%;
}

/* Structure styles (footer css) */
.container, .main {
  height: 100%;
}

.main {
  background-color: #f4f4ec;
  padding-top: 20px;
}

---

谢谢你的帮助

你能创建一个吗？在做JSFIDLE时，它工作得很好。因此，我回顾了css，并试图看看其他样式可能会影响它。显然是页脚的样式（特别是高度）。我不知道为什么这也会影响。但现在我可以调查一下。谢谢你引导我找到答案！