Stretching divs to bottom with a responsive grid

问题

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

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.

Thanks in advance!

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

回答1:

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
}

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.

来源：https://stackoverflow.com/questions/24979374/stretching-divs-to-bottom-with-a-responsive-grid