How do I detect the browser viewport to display desired content above the fold?

My problem is that I want specific content of my website to display above the fold on different viewport or screen resolutions. Is this done with Javascript/jQuery (is there a script that automatically does this?) that detects the browser viewport width and height or is it done through media queries?

I have an example of a website that does this:

http://www.themeskingdom.com/

No matter what screen size or viewport the user has, their desired content always appears above the fold. I want to accomplish the same sort of thing. Any help would be much appreciated.

Solution

Here is a pure css solution.

By using :

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Allows you to assign a height: 100%; to elements because they can base it off of the parent.

Strong recommendations, make sure to look into css calc() and box-sizing to make life a lot easier when working with percents.

box-sizing allows the padding, margin, border to all be calced inside of the tag and not outside of it.

CSS calc() like so, height: calc(100% - 70px);, is also a great tool to use but does not have the best mobile support. (calc should really only be used when you are mixing percents with pixel sizes)

This is the html:

<div class="mainCont">
    <div class="mainHeader">

    </div>
    <div class="control">

    </div>
</div>

Here is the css:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.mainCont {
    position: relative;
    width: 100%;
    height: 100%;
}

.mainHeader {
    width: 100%;
    height: 75%;
    background-image: url("http://www2.ca.uky.edu/forestry/maehrbearky/Forest%20trail.jpg");
    background-size: cover;
    background-position: center center;
}

.control {
    position: relative;
    height: 25%;
    width: 100%;
    background: tan;
}

Finally, a fiddle: Demo