css - .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;
}

谢谢你的帮助