Page height to 100% of viewport?

Here’s just a simplified code example of the HTML:

<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>

and here’s the CSS using vh:

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

It works for me.

I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.

The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.

jQuery

function windowH() {
   var wH = $(window).height();

   $('.sideBar, .mainImg').css({height: wH});
}

windowH();

This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.

I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.

JSFIDDLE (Remove 'show' at the end of the url to see code)

The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.

If you want a pure CSS only approach then you can do something like this,

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

By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.

Refer to this JSFIDDLE to see how it works.

Helpful read about responsive web design