Element height based on window size
by
vietmusic
Introduction
There are many situations in which one might want to size an element according to window size. For example, let's say that you have a <div> that should always take up a quarter of the viewable area. Setting width to 50% (<div style="width:50%">) works well enough, but the same thing does not work at all for height. Why?
The Problem
The problem is that according to current specifications, a relatively sized element gets its base size from the parent. Therefore, any element we place in a wiki will take the main body as its parent (technically, there are a few wrapper levels, but they're also relative to the parent).
This parent (actually the <body> tag), has a fairly stable width, based on the window size unless otherwise specified. The height, however, is dynamic and changes accordingly as content is added. Therefore, the browser cannot specify a height for the body until it's done reading the body, and yet our content is inside the body. That's troublesome.
The Solution
Set up the element
Ultimately, we don't want the body height, we actually want the height of the window's viewing area. It just happens that while window width is the same as body width, window height and body height are two different things.
Javascript allows us to get at the window height.
First, let's define our element, in this case a <div>, but it could be anything from an iframe to an image.
<div id="mydiv" style="width:50%; height:300px">...my content...</div>
That defines a div element that is half of screen width. We specify an absolute height for now that is close to the expected value, just in case a browser without javascript sees it, so that something shows up. The id tag is necessary so the javascript knows which element to modify. Most tags can take an id and style, as seen below:
<img src="/f/mypic.jpg" id="mypic" style="width:50%; height:300px">
<iframe src="doggy.html" id="myframe" style="width:50%; height:300px"></iframe>
etc...
The Javascript
Now we get to the javascript. Paste the following code at the bottom of your page:
<script language="javascript">
var w, h;
if (window.innerWidth) {
w = window.innerWidth;
h = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else if (document.body) {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
</script>
You don't need to understand it. It creates two variables (w)idth and (h)eight, and is compatible with most browsers. Then you add one more line of code:
<script language="javascript">
...
...previous code...
...
document.getElementById("MY_DIV_ID").style.height=h/2 + "px"
</script>
Replace MY_DIV_ID with whatever your id was, and replace h/2 with any expression that would evaluate to an integer (within reason).
Example
The example below uses the exact same code, merely putting it in a function that is called on the fly when you click the links. The iframe automatically changes based on a size relative to the screen width.
Comments (0)
You don't have permission to comment on this page.