使用响应网格将div扩展到底部 [英] Stretching divs to bottom with a responsive grid

问题描述

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

This is the page I'm working on: http://www.vqinteractive.net/temp/index.html

我需要使用 nav side bar 和主要内容均匀地拉伸到浏览器的底部（或者超出，具有内容），无论它们是空的还是一个具有更多的内容。我在周围的容器上放了一个边框，这也没有伸展。我对流体网格很新，我找到所有的老技巧，如 position：absolute 和 height：100％; 正在烧毁网格系统， height：100％; 单独什么都不做。

I need the nav side bar and the main content area to evenly stretch to the bottom of the browser (or beyond, with content), whether they be empty or one has more content that the other. I put a border on the surrounding container and that is not stretching either. I'm pretty new to fluid grids and I'm finding all the old tricks, like position: absolute with height: 100%; are blowing out the grid system and height: 100%; alone does nothing.

我一直在通过线程寻找答案，但没有找到任何与响应式设计相关的东西。还要记住它的设置，所以当内容比浏览器更长，右侧的图片保持固定，而左侧滚动。任何帮助将不胜感激。

I've been hunting through threads for the answer but haven't been able to find anything that pertains to responsive design. Also keeping in mind it is set up so the when the content is longer than the browser, the pic on the right stays fixed while the left side scrolls. Any help would be greatly appreciated.

提前感谢！

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

Visually, this is what I'm trying to do, with or without content, scrolling with: http://www.vqinteractive.net/temp/images/example.gif

推荐答案

我使用Google Chrome浏览器对象检查器，发现这个工具很好：

I fiddled around with the Google Chrome object inspector, and found this to work pretty well:

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

图片不计为内容对于您已设置为最小高度= 85％的框，因此该框将不会扩大没有确定的最小高度。设置min-height：600px，该框将始终至少为图片的大小，如果您在框中添加其他内容，则展开。

The image does not count as content for the box you have set to a min-height=85%, and that box will therefore not expand without a definite min-height. Setting 'min-height: 600px', the box will always be at least the size of the image, and then expand if you add additional content in the box.

这篇关于使用响应网格将div扩展到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！