PDA

View Full Version : 100% height!

ShMiL
03-12-2003, 06:25 AM
Is it possible to make a table which is made out of three rows:
top and bottom are images, and the middle one is empty. Is it possible to make this table cover the whole page by height?
I tried height=100% but no luck.
Anyony?
Cris79
03-12-2003, 07:25 AM
<BODY LEFTMARGIN="0" TOPMARGIN="0">
<TABLE BORDER="1" WIDTH="100%" height="100%" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD height="200" ALIGN="CENTER"><IMG SRC="image1.gif" ALT="" ></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD height="200" ALIGN="CENTER"><IMG SRC="image2.gif" ALT="" ></TD>
</TR>
</TABLE>
</BODY>
200 - is the height of the image. :thumbsup:
ShMiL
03-12-2003, 08:16 AM
that what Id normally do.
But check it - It doesn't work...
cg9com
03-12-2003, 08:18 AM
use CSS.
<style>
table {height:100%}
</style>

if it normally works the other way, it may have something to do with a dtd
ShMiL
03-12-2003, 08:31 AM
tried that too before I posted my thread...
cg9com
03-12-2003, 08:35 AM
what document type?
you may have to adjust body height as well.
angiras
03-12-2003, 08:58 AM
height:100%;
works not at all for Mozilla and netscape I could never fix it !
meow
03-12-2003, 09:23 AM
I think it works if you also do:
html,body { height: 100% }

I'm no sure if that's how it's supposed to work = can be trusted. Anyone knows?
angiras
03-12-2003, 10:00 AM
I have tried it too
html,body { height: 100% }

no effect !
meow
03-12-2003, 10:02 AM
In what doesn't it work? It works in anything v. 5+ on Windows.
ShMiL
03-12-2003, 12:29 PM
1. Using height:100% works for all higher versions of netscape and IE.
2. The body{height:100%} has some effect: it spreads the table as it should on the whole page.
BUT the top and bottom cells are not 200 pixels as we wnated them to be. Instead, the middle cell is very little (the height of the word in it) and the (top and bottom)'s height is higher than 200 pixels...
What can I do?
ShMiL
03-12-2003, 12:31 PM
look at the code for some inspiration :p

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>
<body>

<BODY LEFTMARGIN="0" TOPMARGIN="0" style="height:100%;">
<TABLE BORDER="1" WIDTH="100%" style="height:100%;" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD style="height:200px;" ALIGN="CENTER"><IMG SRC="image1.gif" height=200 width=100 ALT="" ></TD>
</TR>
<TR>
<TD>r </TD>
</TR>
<TR>
<TD style="height:200px;" ALIGN="CENTER"><IMG SRC="image2.gif" height=200 width=100 ALT="" ></TD>
</TR>
</TABLE>
</BODY>
</body>
</html>
Spookster
03-12-2003, 03:14 PM
<html>
<head>
<title>Full Height Table</title>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<script lanaguage="Javascript">
<!--//
var IE5up = document.getElementById&&document.all;
var NS6up = document.getElementById&&!document.all;
var NS4 = document.layers;
var IE4 = document.all&&!window.print;
if(NS4||NS6up)
h=window.innerHeight;
else
h=document.body.clientHeight;

//THIS IS THE START OF YOUR TABLE
document.write('<table bgcolor="orange" border="1" width="100%" height="'+h+'">');
document.close();
//-->

</script>

<noscript>
<!-- THIS IS FOR NONJAVASCRIPT ENABLED BROWSERS -->
<table border="1" height="100%">
</noscript>

<tr><td>
<h1>Some Text</h1>
</td></tr>
</table>
</body>

</html>
ShMiL
03-12-2003, 03:56 PM
Good Idea!

Why won't this work?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>
<body>

<BODY LEFTMARGIN="0" TOPMARGIN="0">
<script lanaguage="Javascript">
<!--//
var IE5up = document.getElementById&&document.all;
var NS6up = document.getElementById&&!document.all;
var NS4 = document.layers;
var IE4 = document.all&&!window.print;
if(NS4||NS6up)
h=window.innerHeight;
else
h=document.body.clientHeight;

m=h-400;

//THIS IS THE START OF YOUR TABLE
document.write('<table bgcolor="orange" border="0" width="100%" height="'+h+'">');
document.write('<TR><TD style="height:200px;" ALIGN="CENTER"><IMG SRC="image1.gif" height=200 width=100 ALT=""></TD></TR>');
document.write('<TR><TD style="height:"'+m+'px;">r </TD></TR>');
document.close();
//-->

</script>
<TR>
<TD style="height:200px;" ALIGN="CENTER"><IMG SRC="image2.gif" height=200 width=100 ALT="" ></TD>
</TR>
</TABLE>
</BODY>
</body>
</html>
meow
03-12-2003, 08:14 PM
Originally posted by ShMiL
1. Using height:100% works for all higher versions of netscape and IE.
2. The body{height:100%} has some effect: it spreads the table as it should on the whole page.
BUT the top and bottom cells are not 200 pixels as we wnated them to be. Instead, the middle cell is very little (the height of the word in it) and the (top and bottom)'s height is higher than 200 pixels...
What can I do?

Works in IE5 (don't have 6 but memory tells me it works), Moz, Opera7
Works not in Opera 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Table height</title>

<style type="text/css">
<!--
html,body,table { height: 100% }
table { width: 80%; border: thin solid }
td.frame { height: 100px; background: #f0f8ff }
td.content { background: #ffffe0 }
-->
</style>
</head>


<body>

<table>
<tr>
<td class="frame"></td>
</tr><tr>
<td class="content"></td>
</tr><tr>
<td class="frame"></td>
</tr></table>

</body>
</html>
ShMiL
03-12-2003, 08:26 PM
It's not working in IE 6.
and I can't logically believe that it'll work in any other platform...