.container没有覆盖全高

Question

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

http://i.stack.imgur.com/gzPgy.png

以下是问题：

http://i.stack.imgur.com/LtgNG.jpg

标题正下方的彩色bg是.main类，我希望从标题向下覆盖整个网站。我不确定为什么它会被推到一个固定的高度。 CSS：

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

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

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

感谢您的帮助