473,404 Members | 2,137 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > making a div height equal to page height

Join Bytes to post your question to a community of 473,404 software developers and data experts.

Making a DIV height equal to page height

5
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.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.  
  5.   <script>
  6.   window.onload = pageLoad;
  7.   function pageLoad()
  8.             {
  9.               document.getElementsByTagName("html")[0].style.height = "100%"; 
  10.               document.body.style.height = "100%";
  11.               dv = document.createElement('div'); 
  12.               dv.style.position="absolute";
  13.               dv.style.top=0;
  14.               dv.style.left=0;
  15.                 dv.style.height="100%";
  16.                 dv.style.width="100%";
  17.                 dv.style.backgroundColor="red";
  18.                 dv.style.filter="alpha(opacity=70)";
  19.                 dv.style.opacity=.70; 
  20.     document.body.appendChild(dv);  
  21.            }
  22.     </script>
  23.  </HEAD>
  24.  
  25.  <BODY>
  26.   test<br><br><br><br><br><br><br>
  27.     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>  
  28.  </BODY>
  29. </HTML>
May 17 '09 #1
7 14778
mrhoo
428 256MB
Try something like this-
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
  2. <html lang= "en">
  3. <head> 
  4. <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"> 
  5.  
  6. <style type= "text/css"> 
  7. html, body{margin: 0; padding: 0}
  8. #scriptdiv{
  9.     position: absolute; top: 0; left: 0; width: 100%; 
  10.     background-color: red; z-index: 100
  11. }
  12. </style>
  13. <script type= "text/javascript"> 
  14. window.onload= function(){
  15.     var dv= document.createElement('div');
  16.     dv.id= 'scriptdiv';
  17.     dv.style.height= document.documentElement.clientHeight+'px';
  18.     document.body.appendChild(dv);
  19. }
  20. </script> 
  21. </head>
  22. <body> 
  23. test
  24. </body> 
  25. </html> 
May 18 '09 #2
ad08
5
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.



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  2. <html lang= "en"> 
  3. <head>  
  4. <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">  
  5.  
  6. <style type= "text/css">  
  7. html, body{margin: 0; padding: 0} 
  8. #scriptdiv{ 
  9.     position: absolute; top: 0; left: 0; width: 100%;  
  10.     background-color: red; z-index: 100 
  11. } 
  12. </style> 
  13. <script type= "text/javascript">  
  14. window.onload= function(){ 
  15.     var dv= document.createElement('div'); 
  16.     dv.id= 'scriptdiv'; 
  17.     dv.style.height= document.documentElement.clientHeight+'px'; 
  18.     document.body.appendChild(dv); 
  19. } 
  20. </script>  
  21. </head> 
  22. <body>  
  23.  test<br><br><br><br><br><br><br>
  24.     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>
  25.  
  26. </body>  
  27. </html>
May 18 '09 #3
acoder
16,027 Expert Mod 8TB
Perhaps what you need is the offsetHeight, though I can't remember the browser incompatibilities in this area.
May 19 '09 #4
NitinSawant
270 100+
Do you want something like this:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.     #dvMain{
  5.         width:100%;
  6.         height:100%;
  7.         background-color:steelblue;
  8.     }
  9.     body{
  10.         width:100%;
  11.         height:100%;
  12.         margin: 0;
  13.         padding: 0;
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="dvMain">
  19.     Hello world
  20. </div>
  21. </body>
  22. </html>
May 20 '09 #5
hsriat
1,654 Expert 1GB
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.
May 20 '09 #6
Frinavale
9,735 Expert Mod 8TB
Is this what you want??
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  2. <html lang= "en"> 
  3. <head>  
  4. <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">  
  5.  
  6. <style type= "text/css">  
  7. html, body{
  8.     margin: 0; 
  9.     padding: 0;
  10.     height:100%;
  11. } 
  12. .someStyle{ 
  13.     width: 100%; 
  14.     height: 100%; 
  15.     background-color: green; 
  16. } 
  17.  
  18. </style> 
  19.  
  20.  
  21. </head> 
  22. <body>  
  23. <div class="someStyle">
  24.   hello world!
  25. </div>
  26. </body>  
  27. </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:
@acoder
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:

Expand|Select|Wrap|Line Numbers
  1. function BrowserHeight() {
  2.     var theHeight;
  3.     if (window.innerHeight) {
  4.         theHeight = window.innerHeight;
  5.     }
  6.     else if (document.documentElement && document.documentElement.clientHeight) {
  7.         theHeight = document.documentElement.clientHeight;
  8.     }
  9.     else if (document.body) {
  10.         theHeight = document.body.clientHeight;
  11.     }
  12.     return theHeight;
  13. }
So a much better solution would be:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  2. <html lang= "en"> 
  3. <head>  
  4. <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">  
  5.  
  6. <style type= "text/css">  
  7. html, body{
  8.     margin: 0; 
  9.     padding: 0;
  10. } 
  11.  
  12. .someStyle{ 
  13.     width: 100%; 
  14.     height: 100%; 
  15.     background-color: green; 
  16.     z-index: 100; 
  17. } 
  18.  
  19. </style> 
  20.  
  21. <script type="text/javascript">
  22. function SetHeightOfDiv(){
  23.     var theDiv = document.getElementById('myDiv');
  24.     theDiv.style.height = BrowserHeight()+"px";
  25. }
  26.  
  27. function BrowserHeight() {
  28.     var theHeight;
  29.     if (window.innerHeight) {
  30.         theHeight = window.innerHeight;
  31.     }
  32.     else if (document.documentElement && document.documentElement.clientHeight) {
  33.         theHeight = document.documentElement.clientHeight;
  34.     }
  35.     else if (document.body) {
  36.         theHeight = document.body.clientHeight;
  37.     }
  38.     return theHeight;
  39. }
  40. </script>
  41. </head> 
  42. <body onload="SetHeightOfDiv()">  
  43. <div id="myDiv" class="someStyle">
  44.   hello world!
  45. </div>
  46. </body>  
  47. </html>
May 22 '09 #7
ad08
5
Thanks to all of you guys. I have resolved this issue using 'scrollHeight' property. Pleas see the code below.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <HTML> 
  3.  <HEAD> 
  4.  
  5.   <script> 
  6.   window.onload = pageLoad; 
  7.   function pageLoad() 
  8.             { 
  9.             pageHeight = document.getElementById('page').scrollHeight;
  10.               document.getElementsByTagName("html")[0].style.height = "100%";  
  11.               document.body.style.height = "100%"; 
  12.               dv = document.createElement('div');  
  13.               dv.style.position="absolute"; 
  14.               dv.style.top=0; 
  15.               dv.style.left=0; 
  16.                 dv.style.height= pageHeight+"px"; 
  17.                 dv.style.width="100%"; 
  18.                 dv.style.backgroundColor="red"; 
  19.                 dv.style.filter="alpha(opacity=70)"; 
  20.                 dv.style.opacity=.70;  
  21.     document.body.appendChild(dv);   
  22.            } 
  23.     </script> 
  24.  </HEAD> 
  25.  
  26.  <BODY id="page"> 
  27.   test<br><br><br><br><br><br><br> 
  28.     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>   
  29.  </BODY> 
  30. </HTML>
Jul 7 '09 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

1
tbody height vs summary height of table row cells
by: marek | last post by:
if table body has specified height set, which would be taller than the summa of the specified heighted cells, should the cells heights be adjusted to be more taller, so the summa height will...
HTML / CSS
1
Is there a way to make row height equal to column width when you don't know value in advance?
by: John | last post by:
Hi again, I appreciate all the advice I've gotten so far. My question this time is whether there's a way to make the row height equal to the column width when you don't know in advance what...
HTML / CSS
4
Blank Pages in Printing Reports (Page Height Mismatch?)
by: Robert McClenon | last post by:
I am having a minor but annoying problem with some reports in Access 2003. (I had the same problem with Access 97, so it isn't version-dependent.) Some of the reports that I originally developed...
Microsoft Access / VBA
1
PHP-MySQL Result Set Truncated in HTML CSS Page Height
by: automation | last post by:
There is a truncation error of my Web Application using PHP 5.04, MySQL 5.022, and HTML(IE 6.0) whereby the MySQL Result Set is being truncated on the HTML page, even though the CSS Div Page Height...
HTML / CSS
10
Ajm113
Making A History Page For BIG Sites
by: Ajm113 | last post by:
Making a History Page for BIG Sites Intro: Ok, let's say after a while your website has grown massive. We're talking search engine, forum and video hosting -- you've got a LOT of content. And you...
PHP
1
Dynamic page height in div
by: jaiwin | last post by:
If any one know the dynamic div height according to the page height.
Javascript
10
pradeepjain
page height
by: pradeepjain | last post by:
Hello guys, I am working on a site where in i have a container of width 90% within which all header footer and content area comes.I have a small problem with footer that is...
HTML / CSS
0
How to reduce the page height??
by: SLauren | last post by:
Hi, I am creating a crystal report using ASP.Net in Visual Studio 2005. I am getting more space below the report. Can anyone please help how to reduce the page height? Following is the whole...
ASP.NET
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!