Develop Reference

Get body height where body height is less than viewport height

If body is smaller than viewport, then the viewport size is returned.
What I am trying to do is resize a picture so that the body fits inside the viewport. I want to have one of those nice "above the fold" layouts where the user does not need to scroll. It breaks though when the screen is so large that the body is smaller than the viewport.
If body < viewport
then
document.body.scrollHeight (body) = document.documentElement.clientHeight (viewport)
The jQuery solution is to use $(document).height(), but it gives the larger of the viewport or the document.
How to get the height of the entire document with JavaScript offers solutions that fail here for the same reason.
How do I find the body height where the body height is less than the viewport height?

To prevent this trouble, you can use CSS Viewport variables to define your body height equal to the viewport! See above:
body {
height: 100vh;
}
In this case i am using the vh variable, that corresponds to the Viewport Height. Check the other options of viewport variables that your can use.

Shrink both height and width of a div by scrolling?

Is it possible to shrink both the height and the width of a div simultaneously while scrolling down a page? For example, as the user scrolls down, the div size goes from 400px by 400px to 200px by 200px while staying in the center of the page? I know it's possible to shrink the height OR the width using jQuery, but I haven't seen anything on shrinking both.

You can get the height and width, decrement both, and then reapply the new values inside of a scroll event.
var divToChange = $('#sizeShifter');
$(document).scroll(function(){
var divHeight = divToChange.height();
var divWidth = divToChange.width();
divHeight-=5;
divWidth-=5;
divToChange.css({width:divWidth, height:divHeight});
});
You can also reverse this effect when the user scrolls up. This is a little more involved, but here is a working fiddle to get you started.

Canvas - Height adjusts itself - Sketch.js

I am using sketch.js to have a simple sketch board for a mobile app. It is just supposed to fill the full screen through setting width and height to a 100%, but after I click into the "sketch board" it adjusts itself to a smaller size. How do I set the canvas to full screen in this case? This is my example http://jsfiddle.net/66UJ9/
<canvas id='mysketch' style="height:100%; width:100%; border: 1px solid black; "></canvas>

CSS's height attribute will not refer to the height as the percentage of window, which is what you're expecting. The MDN states:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto
There is no containing block in your Fiddle, and it is not absolutely positioned, therefore it defaults to auto. But you can set the <canvas>'s height to the browser window with JS like so:
// Set the <canvas> height to the window's height
$('canvas').css('height', $(window).height());
You may need to adjust this a little depending on how your real page looks. (JSFiddle is adding some padding which throws it off.)

How to get height of div and set width as height in Windows 8

I have a div. I've set the width of the div to auto. I want this div to be a square, so I've set the height of the div to 100%. Now if I set the width of the div to 100% it wouldn't be a square as most screens are rectangle, so I thought I could get the current height of the div in pixels and set the width as the height in landscape mode, and do the opposite in portrait mode, but I have no idea about how to go about this. Please assist me for the same. I'm using HTML and JavaScript

Without any extension like jQuery:
var div = document.getElementById("myDiv");
var height = div.clientHeight;
div.style.width = height + 'px';

I don't think JavaScript is necessary for that; if you are doing mobile/tablet design you could use media queries to change the width and height of your div; and if you want it to be square you could set the width and height to be the same with CSS. Experiment with percentages until you find which values produce equal width and height in web developer or firebug.

How can I get IE's width without scrollbar

I get the width of the browser using the following line:
$(document).width()
and then I set the element to this width.
But in IE, the horizontal scrollbar appears (width is larger than the browser size - I think this is because it counts the width of vertical scrollbar). I use the html 4.0 transition doctype. What should I do?

Try the clientWidth property, like so:
$('body').attr('clientWidth')
From the Mozilla Developer Center:
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
From MSDN:
Retrieves the width of the object including padding, but not including margin, border, or scroll bar.

It shouldn't count the scrollbar. Does your element have margin or border? That would be added to the width of the element and affect the horizontal scrolling. Just try subtracting from the $(document).width() value.

You can use $(window).width(), which doesn't include the scrollbar. However, that's the window width not the document width. The document can be a lot wider than the window in horizontal scrollbar situations. If your page will never get wide enough for a horizontal scrollbar, this may be fine for you.
Getting the scrollbar-less document width in IE (Quirksmode), regardless of the existence of a horizontal scrollbar, I know of no perfect solution. This is what I'm currently using:
var maxLikelyScrollbarWidth = 25; // It's 20px on my IE
var hscroll = $(document).width() > $(window).width() + maxLikelyScrollbarWidth;
var widthNoScrollbar = hscroll ? $(document).width() : $(window).width();
It's not perfect but does the job. There are edge cases though.