使用响应网格将div拉伸到底部

Question

这是我正在处理的页面：http://www.vqinteractive.net/temp/index.html

我需要导航栏和主要内容区域，以便均匀地延伸到浏览器的底部（或超出内容），无论它们是空的还是一个人的内容比另一个人多。我在周围的容器上放了一个边框，也没有拉伸。我对流体网格很陌生，而且我发现所有旧技巧，例如position: absolute和height: 100%;正在吹灭网格系统而height: 100%;单独无效。

我一直在搜索线索以寻找答案但是却无法找到与响应式设计有关的任何内容。同时请记住，它设置为当内容比浏览器长时，右边的图片保持固定而左边滚动。任何帮助将不胜感激。

提前致谢！

从视觉上看，这是我尝试做的事情，有或没有内容，滚动： http://www.vqinteractive.net/temp/images/example.gif

Answer 1

我摆弄了谷歌Chrome对象检查员，发现这很好用：

@media screen and (min-width: 1241px)
    #main {
    min-height: 85%;      // <---- REMOVE
    min-height: 600px;    // <---- INSERT
}

图像不计入您设置为最小高度= 85％的框的内容，因此该框不会在没有明确的最小高度的情况下展开。设置＆＃39; min-height：600px＆＃39;，该框始终至少为图像的大小，如果您在框中添加其他内容，则展开。