It looks like I'm missing something basic. I want a certain DIV to have the height of the window. The effect should be that there's never any need to scroll down.
Do I have to use JavaScript? I was told that it's possible with css, but I can't find the relevant property - or I'm doing something wrong.
Do I have to use JavaScript? I was told that it's possible with css, but I can't find the relevant property - or I'm doing something wrong.
Javascript is the way to go, you can not determine winodow size with css and and re-calculate based on window resizing.
Here is the trick:
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
.yourDivStyle {
...
height: 100%;
}
Ok, so in Javascript (not jQuery or anything):
<html>
<head>
<script type="text/javascript">
<!--
var sWidth;
var sHeight;
if (typeof window.innerWidth != 'undefined')
{
sWidth = window.innerWidth,
sHeight = window.innerHeight
} else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
sWidth = document.documentElement.clientWidth,
sHeight = document.documentElement.clientHeight
} else
{
sWidth = document.getElementsByTagName('body')[0].clientWidth,
sHeight = document.getElementsByTagName('body')[0].clientHeight
}
//VARIABLES STORED IN sWidth AND sHeight
document.write('<div style="height: '+sHeight+'; width: '+sWidth+';">CONTENT</div>');
//-->
</script>
</head>
<body>
</body>
</html>
Obviously you could write the div out seperately ^_^
If you want to turn scrolling off, use this CSS:
html, body
{
overflow: hidden;
}
But remember now the content will not scroll - you can put overflow:auto or overflow:scroll on individual divs if you need some scrolling.
If you use Javascript make sure to register for the onresize event so that you can change numbers if the window is resized.
Make all parents have height: 100%; or use position: absolute /* or fixed */; left: 0; top: 0; width: 100%; height: 100%;.