I have a page that starts with a navigation bar, with specific height, and under that I placed a code that should fill out the rest of the height. How could I code it for various resolutions? I need the "working area" size of the browser.
I have a page that starts with a navigation bar, with specific height, and under that I placed a code that should fill out the rest of the height. How could I code it for various resolutions? I need the "working area" size of the browser.
Share Improve this question asked Dec 10, 2011 at 20:50 PmillanPmillan 5734 gold badges10 silver badges22 bronze badges 2 |4 Answers
Reset to default 7$window_width = "<script type='text/javascript'>document.write(window.innerWidth);</script>";
Cannot be done with PHP. Even if it could, this CSS is a far better solution.
You have encountered the most annoying CSS problem in existence. There seems to be as many answers to this question as there are people asking it. The above link is the best, most cross-browser friendly solution I have found for this issue.
Don't let the part about the footer confuse you. If you don't want a footer, it will still work perfectly.
Here's how I did it. I just replaced my index.php with this simple little tool, and renamed my index.php index2.php. It just checks these things using pure javascript and passes them to your real index file as $_GET variables. What could be easier than that? All done! Took me 5 minutes, will take you 30 seconds :)
<html>
<head>
<script type="text/javascript">
if(window.innerHeight > window.innerWidth){
var landscapeOrPortrait = 'portrait';
} else {
var landscapeOrPortrait = 'landscape';
}
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
window.location.replace('index2.php?width='+width+'&height='+height+'&landscapeOrPortrait='+landscapeOrPortrait);
</script>
</head>
Use absolute positioning.
.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
}
.content {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
javascript window size. What you mention in the title, however, is possible using CSS as @FakeRainBrigand says – Pekka Commented Dec 10, 2011 at 20:51