Forum Moderators: open
For the life of my I cannot fix this little problem of 100% page height in IE. My pages works perfectly in both Firefox and Opera. But in IE the pages are 'pushed' beyond the pages boundries and a scroll bar appears.
I have read other posts about how the actual height is actually what ever the height of the elements are plus 100%.
My qeustion is how do I ensure that a scroll bar does not appear (unless infact it is needed). I would like for the page to appear in IE as it does in Firefox.
Here is a link to my page: <SNIP>
Thanks in advance
Cheers,
f4k
< Sorry, no personal URLs or site reviews. Please see the Terms of Service [webmasterworld.com] >
[edited by: BlobFisk at 2:42 pm (utc) on Aug. 4, 2004]
You can do this using CSS:
body {
height: 100%;
width: 100%;
overflow: hidden
}
It's not foolproof but it should give you the what you are looking for.
HTH
Thanks for your relpy.
I tried that but it cuts off the footer. Further, if I set the main element (the one I want to expand and contract) to 'auto', IE uses all the space on the page instead of aligning everything to the top as I specified in the CSS.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transistional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page</title>
<meta http-equiv="content-type" content="text/xhtml; charset=iso-8859-1" />
<style>
/* global elements */
html
{
height: 100%;
margin: 0px;
padding: 0px;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
color: #000;
background: #355373;
font: 12px verdana, arial, helvetica, sans-serif;
}
img
{
border: 0px;
}
/* table elements */
table
{
width: 100%;
height: 100%;
}
#spacer
{
height: 20px;
}
#out
{
height: 20px;
width: 80px;
padding: 0px;
margin: 0px;
background: #7094b7;
color: #000;
text-align: right;
vertical-align: top;
}
.out-color
{
background: #7094b7;
color: #000;
}
#in
{
height: 20px;
background: #fff;
color: #000;
text-align: right;
vertical-align: top;
}
/* header elements */
#header
{
height: 70px;
background: #fff;
color: #000;
text-align: left;
vertical-align: top;
}
#header img
{
margin: 0px 0px 0px 30px;
}
/*main elements */
#main
{
background: #fff;
color: #000;
text-align: left;
vertical-align: top;
height: 100%;
}
#main p
{
margin: 0px 10px 10px 30px;
text-align: justify;
}
/* sidebar elements */
#sidebar
{
background: #fff;
color: #000;
vertical-align: top;
width: 165px;
height: auto;
}
/* extra elements */
#extra
{
width: 80px;
color: #000;
background: #355373;
}
/* footer elements */
#footer
{
font: 10px verdana, arial, helvetica, sans-serif;
color: #000;
background: #fff;
height: 20px;
}
#footer a:link
{
font: 10px verdana, arial, helvetica, sans-serif;
color: #7094b7;
background: #fff;
text-decoration: none;
}
#footer a:visited
{
font: 10px verdana, arial, helvetica, sans-serif;
color: #7094b7;
background: #fff;
text-decoration: none;
}
#footer a:hover
{
font: 10px verdana, arial, helvetica, sans-serif;
color: #355373;
background: #fff;
text-decoration: none;
}
#footer a:active
{
font: 10px verdana, arial, helvetica, sans-serif;
color: #355373;
background: #fff;
text-decoration: none;
}
#footer #footer-left
{
text-align: left;
padding: 0px 0px 5px 30px;
height: 20px;
vertical-align: bottom;
}
#footer #footer-right
{
text-align: right;
width: 165px;
padding: 0px 10px 5px 0px;
white-space: nowrap;
height: 20px;
vertical-align: bottom;
}
#footer #out-color
{
background: #7094b7;
color: #000;
width: 80px;
}
.color
{
color: #7094b7;
background: #fff;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" id="spacer"></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="out-color" colspan="2"></td>
<td id="out"> </td>
<td></td>
</tr>
<tr>
<td colspan="2" id="in"> </td>
<td class="out-color"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="header"> </td>
<td class="out-color"></td>
<td></td>
</tr>
<tr>
<td id="main">
<p>Vivamus id lorem. Proin posuere scelerisque libero. Vivamus convallis purus vel est. Quisque libero sem, consectetuer at, sagittis ac, pulvinar vitae, nisl. Suspendisse venenatis, est vitae scelerisque auctor, lectus wisi cursus mauris, id consequat enim augue et neque. Integer eu magna vitae libero dignissim commodo. Praesent a tellus. Maecenas elementum. Morbi in enim.</p>
</td>
<td id="sidebar"></td>
<td class="out-color"></td>
<td></td>
</tr>
<tr id="footer">
<td id="footer-left">Copyright © 2004 </td>
<td id="footer-right"></td>
<td id="out-color"></td>
<td id="extra"></td>
</tr>
</table>
</body>
</html>
Cheers,
f4k.
I kinda would like it to validate though.
Cheers though,
f4k.
The solution is out there if you Google but here it is all the same.
CSS is the answer, but set your table class to the following:
.yourClassName {
height: 100%;
width: 100%;
margin: 0px -15px -15px 0px;
padding: 0px;
border: 0px;
right: 15px;
bottom: 15px;
}
...IE seems to include the space needed for the scrollbar in the 100% even if there is no scrollbar called so it puts one in there for you since it thinks it's the 'right' thing to do... a dumb bug. The above will 'fake shift' your box (15px right counters -15px border) as a workaround to that problem. Hope this was what you needed.
Thanks for your help.
