Printable View
I am trying to set a divs height to 100% but it is not listening.
(i put the style for the sake of simplifying this post). If i set it to a specific size (not %) it will do it. Can anyone tell my why it wont work or another way to go about it?Code:<div style="width:100%;height:100%;overflow:auto;text-align:center;background:red;">
thanks
michael
ok, it looks like if the 'containing block' (containing the item w/a height%) doesn't have a height specified then a %height is treated like auto... the containg block is my <body> so what to do?
thanks michael
put the whole thing in a table at 100%
man... now why didnt i think of that... i wasted all day thinking (or avoiding) on that prob.
thanks!
michael
This works, and you don't have to hork your page with a table. Also, try setting the padding and margins to zero, or making the div position: absolute, so it won't be contained by the body block. For more fun, try setting the dimensions to 110%.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.Container {
height: 100%;
width: 100%;
background-color: red;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
Sorry, had too much fun...
That is the same as setting the body's background-color to red.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: red;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
The 'content' div idea didnt have the desired effect. I am trying to get the overflow value to work on a div so that when the content is more than the size of the window (this is a popup that is dynamic so I never know how much data is going to be inside) it creates a scrollbar.
The table idea did work but I prefer divs.
thanks,
Michael
ps sorry about the late response... being the only comp person in the dept I jump from proj to proj.
And "auto"and "scroll" don't work for "overflow" values?
works when inside of a 100% table but that was the only way I could get it to work.Code:<div style="width:100%;height:100%;overflow:auto;text-align:center;">
Michael
Dude, I have no idea what you are trying to do then.
If this doesn't work, then explain again what you want.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: red;
color: black;
overflow: auto;
text-align: center;
}
</style>
</head>
<body>
<div class="Container">
<span>Sample Text</span>
</div>
</body>
</html>
When I use the example you are posting it works perfectly but when I impliment it into my existing page the scrollbars appear late and the down arrow is just off screen. It's working fine w/the table so no worries.
Thanks
Michael