Is this what you want??
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-
<html lang= "en">
-
<head>
-
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">
-
-
<style type= "text/css">
-
html, body{
-
margin: 0;
-
padding: 0;
-
height:100%;
-
}
-
.someStyle{
-
width: 100%;
-
height: 100%;
-
background-color: green;
-
}
-
-
</style>
-
-
-
</head>
-
<body>
-
<div class="someStyle">
-
hello world!
-
</div>
-
</body>
-
</html>
Note that I'm kind of cheating in this code snippet.
The problem that you're facing is that the <html> and <body> tags have a height that is equal to the content. Therefore, if you have a <div> as content and set it's height to 100% it will only be as tall as the content within it.
So in the above snippet I've set the <html> and <body> tags to have a height of 100%.
Now the reason I say it's a cheat is because when you do this you will see a scroll bar in some browsers.
You need to do as Acoder has suggested here:
Quote:
Originally Posted by acoder 
Perhaps what you need is the offsetHeight, though I can't remember the browser incompatibilities in this area.
You need to determine the height of the browser window and set your <div>'s height to that value.
Here is a JavaScript function that will find and return the height of the window:
-
function BrowserHeight() {
-
var theHeight;
-
if (window.innerHeight) {
-
theHeight = window.innerHeight;
-
}
-
else if (document.documentElement && document.documentElement.clientHeight) {
-
theHeight = document.documentElement.clientHeight;
-
}
-
else if (document.body) {
-
theHeight = document.body.clientHeight;
-
}
-
return theHeight;
-
}
So a much better solution would be:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-
<html lang= "en">
-
<head>
-
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">
-
-
<style type= "text/css">
-
html, body{
-
margin: 0;
-
padding: 0;
-
}
-
-
.someStyle{
-
width: 100%;
-
height: 100%;
-
background-color: green;
-
z-index: 100;
-
}
-
-
</style>
-
-
<script type="text/javascript">
-
function SetHeightOfDiv(){
-
var theDiv = document.getElementById('myDiv');
-
theDiv.style.height = BrowserHeight()+"px";
-
}
-
-
function BrowserHeight() {
-
var theHeight;
-
if (window.innerHeight) {
-
theHeight = window.innerHeight;
-
}
-
else if (document.documentElement && document.documentElement.clientHeight) {
-
theHeight = document.documentElement.clientHeight;
-
}
-
else if (document.body) {
-
theHeight = document.body.clientHeight;
-
}
-
return theHeight;
-
}
-
</script>
-
</head>
-
<body onload="SetHeightOfDiv()">
-
<div id="myDiv" class="someStyle">
-
hello world!
-
</div>
-
</body>
-
</html>
