Set website height according to screen height

[charltondurie]

I have a website that I want to have it's height flexible. So depending on the screen the user is viewing it on, the site will render to that height.

 

I was trying to use the following javascript in my header tag to set the height of my 'main' id div but with no luck. Any clue's?

<script type="text/javascript" language="javascript">
document.getElementById("main").style.height = screen.height;
</script>

[Adam]

Code like that in the head of the document will never be run. You need to assign the code to an event:

 

window.onload = function() {
    document.getElementById("main").style.height = screen.height;
}

 

Problem here is that this code won't get executed until the page has finished loading, meaning the effect will be very noticeable as the DIV suddenly changes height. I'd move it to the bottom of your body, where the code will be executed instantly and you don't need to assign it to an event:

 

[...]
    <script type="text/javascript">
        document.getElementById("main").style.height = screen.height;
    </script>
</body>
</html>

 

Although I should mention, not everybody has JS enabled and this kind of reliance on it for the design isn't the best solution. Perhaps if you post a link to your site we can help you implement the same effect using CSS?

[charltondurie]

I am now using it to center the page as can be seen on the temp site here: http://www.tenpoint.com.au/wfhs/ I was unable to get it all to work with css do to having to use absolute positioning to achieve my fluid layout and scrollable center part of the page.

 

Any pointers to better achieve this would be greatly appreciated.

 

I ended u using the following JS:

<script type="text/javascript" language="javascript">
var left = (document.documentElement.clientWidth - '800') / '2';
document.getElementById('main').style.left = left + 'px';

window.onresize = function () {
	var left = (document.documentElement.clientWidth - '800') / '2';
	document.getElementById('main').style.left = left + 'px';
}
</script>