Making a DIV height equal to page height

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ad08
    New Member
    • May 2009
    • 5
    #1

    Making a DIV height equal to page height

    I want to create a div over the body which should take 100% height of the page.
    I am defining html and body height is 100%. Also the div height is 100%.
    still it's not working for me. Can some one please tell me what is wrong?
    below is the code snippet.

    Thanks.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  
  <script>
  window.onload = pageLoad;
  function pageLoad()
            {
              document.getElementsByTagName("html")[0].style.height = "100%"; 
              document.body.style.height = "100%";
              dv = document.createElement('div'); 
              dv.style.position="absolute";
              dv.style.top=0;
              dv.style.left=0;
                dv.style.height="100%";
                dv.style.width="100%";
                dv.style.backgroundColor="red";
                dv.style.filter="alpha(opacity=70)";
                dv.style.opacity=.70; 
	document.body.appendChild(dv);  
           }
	</script>
 </HEAD>

 <BODY>
  test<br><br><br><br><br><br><br>
    test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  
 </BODY>
</HTML>
    Last edited by Dormilich; May 18 '09, 05:42 AM. Reason: Please use [code] tags when posting code
    Tags: body, div, height, page
    • mrhoo
      Contributor
      • Jun 2006
      • 428
      #2
      Try something like this-
      Code:
      <!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}
#scriptdiv{
	position: absolute; top: 0; left: 0; width: 100%; 
	background-color: red; z-index: 100
}
</style>
<script type= "text/javascript"> 
window.onload= function(){
	var dv= document.createElement('div');
	dv.id= 'scriptdiv';
	dv.style.height= document.documentElement.clientHeight+'px';
	document.body.appendChild(dv);
}
</script> 
</head>
<body> 
test
</body> 
</html>

        Comment

        • ad08
          New Member
          • May 2009
          • 5
          #3
          I tried your code but it gives me the same issue. DIV height does not stretch to the page height when content is longer than viewport.
          In the following example, I don't get the red background till the end of the page.

          Thanks.



          Code:
          <!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} 
#scriptdiv{ 
    position: absolute; top: 0; left: 0; width: 100%;  
    background-color: red; z-index: 100 
} 
</style> 
<script type= "text/javascript">  
window.onload= function(){ 
    var dv= document.createElement('div'); 
    dv.id= 'scriptdiv'; 
    dv.style.height= document.documentElement.clientHeight+'px'; 
    document.body.appendChild(dv); 
} 
</script>  
</head> 
<body>  
 test<br><br><br><br><br><br><br>
    test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>   test<br><br><br><br><br><br><br>
    
</body>  
</html>
          Last edited by Dormilich; May 18 '09, 05:43 AM. Reason: Please use [code] tags when posting code

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Perhaps what you need is the offsetHeight, though I can't remember the browser incompatibiliti es in this area.

                Comment

                • NitinSawant
                  Contributor
                  • Oct 2007
                  • 271
                  #5
                  Do you want something like this:

                  Code:
                  <html>
<head>
<style type="text/css">
    #dvMain{
        width:100%;
        height:100%;
        background-color:steelblue;
    }
    body{
    	width:100%;
    	height:100%;
    	margin: 0;
    	padding: 0;
    }
</style>
</head>
<body>
<div id="dvMain">
    Hello world
</div>
</body>
</html>

                    Comment

                    • hsriat
                      Recognized Expert Top Contributor
                      • Jan 2008
                      • 1653
                      #6
                      I think position:fixed, with left, right, top, bottom set to 0px and overflow:auto should work. But I'm not sure if this is what you actually require.

                        Comment

                        • Frinavale
                          Recognized Expert Expert
                          • Oct 2006
                          • 9749
                          #7
                          Is this what you want??
                          Code:
                          <!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:
                          Originally posted by acoder
                          Perhaps what you need is the offsetHeight, though I can't remember the browser incompatibiliti es 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:

                          Code:
                          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:
                          Code:
                          <!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>

                            Comment

                            • ad08
                              New Member
                              • May 2009
                              • 5
                              #8
                              Thanks to all of you guys. I have resolved this issue using 'scrollHeight' property. Pleas see the code below.

                              Code:
                              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
  
  <script> 
  window.onload = pageLoad; 
  function pageLoad() 
            { 
			pageHeight = document.getElementById('page').scrollHeight;
              document.getElementsByTagName("html")[0].style.height = "100%";  
              document.body.style.height = "100%"; 
              dv = document.createElement('div');  
              dv.style.position="absolute"; 
              dv.style.top=0; 
              dv.style.left=0; 
                dv.style.height= pageHeight+"px"; 
                dv.style.width="100%"; 
                dv.style.backgroundColor="red"; 
                dv.style.filter="alpha(opacity=70)"; 
                dv.style.opacity=.70;  
    document.body.appendChild(dv);   
           } 
    </script> 
 </HEAD> 
  
 <BODY id="page"> 
  test<br><br><br><br><br><br><br> 
    test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>  test<br><br><br><br><br><br><br>   
 </BODY> 
</HTML>
                              Last edited by Dormilich; Jul 8 '09, 04:33 AM. Reason: Please use [code] tags when posting code

                                Comment

                                Previous template Next
                                Working...