css - 使用响应式网格将 div 拉伸(stretch)到底部

Question

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

我需要导航侧栏和主要内容区域均匀地延伸到浏览器的底部(或超出，有内容)，无论它们是空的还是一个比另一个有更多的内容。我在周围的容器上加了一个边框，但也没有拉伸(stretch)。我对流体网格很陌生，我发现了所有的老技巧，比如 position: absolute 和 height: 100%; 正在破坏网格系统和 height: 100%; 单独没有任何作用。

我一直在寻找答案，但未能找到与响应式设计相关的任何内容。还要记住它的设置，因此当内容比浏览器长时，右侧的图片保持固定，而左侧滚动。任何帮助将不胜感激。

提前致谢!

在视觉上，这就是我想要做的，有或没有内容，滚动: http://www.vqinteractive.net/temp/images/example.gif

Answer 1

我摆弄了一下 Google Chrome 对象检查器，发现它工作得很好:

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

图像不算作您设置为最小高度 = 85% 的框的内容，因此如果没有明确的最小高度，该框将不会展开。设置 'min-height: 600px'，框将始终至少为图像的大小，然后如果您在框中添加其他内容则展开。