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. - <!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>
7  14795 
Try something like this- - <!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>
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. - <!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>
acoder 16,027
Recognized Expert Moderator MVP
Perhaps what you need is the offsetHeight, though I can't remember the browser incompatibiliti es in this area.
Do you want something like this: - <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>
hsriat 1,654
Recognized Expert Top Contributor
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.
 Frinavale 9,735
Recognized Expert Moderator Expert
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: @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: -
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>
Thanks to all of you guys. I have resolved this issue using 'scrollHeight' property. Pleas see the code below. - <!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>
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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 equal the height specified in table body?
--
Marek Mänd
Estonia, Tallinn
|
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 you'll be
using.
The content of each cell is text.
|
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
with the Report Wizard but have since edited now print so that there
is a blank page after each actual page. I assume that this is because
the page size is slightly larger than the Page Setup for the LaserJet.
I assume that I need to adjust some...
|
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 is set to 'auto' which is supposed to grow the HTML page height to the size necessary to display the contents within the page. The query count is correct, but the MySQL Result Set is being truncated on the html page. This happens for MySQL Results on...
|
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 are wondering, "Why do I need yet another feature for my big site?"
Well, some people can become forgetful every time they see content on your site, and let's suppose that one day they needed to work on a good php script for their class and they...
| | |
by: jaiwin |
last post by:
If any one know the dynamic div height according to the 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 when i have content more the footer goes down which is ok.but when i have very small content say 5 lines the footer comes up this is the main problem.when the content is less then a page height i want the footer to be at the bottom of the page..is there...
|
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 stuff which the .aspx file contains:
<CR:CrystalReportViewer ID="CrystalReportViewer1" runat="server" AutoDataBind="True"
Height="1039px" ReportSourceID="CrystalReportSource1" Width="901px" BestFitPage="False" />
...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
