StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What you are asking for is not difficult at all. All it requires is one nice JavaScript function and a few quick minor changes to your HTML code. </p> <p>First, give your "container" <code><div></code> an id by making some quick changes to your HTML;</p> <pre><code><div class="container" id="container"> I want this container to be the height of the users screen resolution. </div> </code></pre> <p>Next define a JavaScript variable that refers to it:</p> <pre><code>var container = document.getElementById("container"); </code></pre> <p>Then use this neat function that I use all the time to get the dimensions of the screen using JavaScript:</p> <pre><code>function resize() { // 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 } container.style.height = viewportheight+"px"; } </code></pre> <p>Notice that I put <code>container.style.height = viewportheight+"px";</code> in the function. This means that every time <code>resize();</code> is called we will update the dimensions of the browser and reapply those dimensions to the container <code><div></code>.</p> <p>We will call the <code>resize();</code> function in the body every time the page resizes, as well as when the page first loads, using this HTML:</p> <pre><code><body onload="resize()" onresize="resize()"> </code></pre> <p>The function will resize the container <code><div></code> to the full page height. Let me know if you have problems with this, or have any questions!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload