Hi All,

We most of the time in web development get stuck with responsive designs, the best way to handle that now a days is to use Bootstrap classes which take cares of your site but that helps you to achieve responsiveness width wise.

What if we want responsiveness height wise? What if we want to something on the whole window without scrollbars and that should fit in exactly the height and width of our browser?

This Blog will help you achieve this using Javascript, we will determine the actual height and width of the browser at runtime.

function getViewport() {
            var viewPortWidth;
            var viewPortHeight;

            // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
            if (typeof window.innerWidth != 'undefined') {
                viewPortWidth = window.innerWidth,
                viewPortHeight = window.innerHeight
            }

                // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth !=
            'undefined' && document.documentElement.clientWidth != 0) {
                viewPortWidth = document.documentElement.clientWidth,
                viewPortHeight = document.documentElement.clientHeight
            }

                // older versions of IE
            else {
                viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
                viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
            }
            return [viewPortWidth, viewPortHeight];
        }

The above function will give you the actual height and width of your window at runtime. Use it and then play with your controls dynamically. To use the above function you can simply:

var width = getViewport()[0];
var height = getViewport()[1];

Happy Coding..........