Varying heights with different divs and screens

Question

I've been searching for answers for some time, and I believe the answers might be here to be found, just that I'm not skilled enough to put all the knowledge together to fit my exact case. Here's the thing:

I have a page with a centered header and content. The centered content div has a background image, and all the content is in different divs that gets visible by clicks in the header menu. My problem is that I want the height of the entire page to vary with the length of whichever div is visible. However, I also want it to be no less than 100% on a big screen since I want the background image of the centered content div to always vertically fill the entire screen area if you have a big screen.

How I solved it for now: the body has a min-height of 100% and the content wrapper has the following css:

width: 1159px;
height:100%;
min-height: 2500px;
padding: 0px;
margin-left: auto;
margin-right: auto; 
background-image: url('images/bg.jpg');

The value of 2500px is approximately the height of the header + the largest div. My problem now is that the div with less content has a lot of empty space at the bottom of the page which is scrollable if you are using a small screen.

Thank you all in advance!