Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

create a table that is 100% of screen

Status
Not open for further replies.
beefeater267

beefeater267

Programmer
Apr 6, 2005
79
hi,

i'm trying to create web app and am having problems laying out a HTML table in the default.aspx page. Can anyone help?

basically, i'd like a table the ENTIRE height of the screen (100%) and 725 pixels wide. Essentially, I need the top 80 pixels of the table to say header and the bottom X pixels to be my content TD.

I tried below.. but it didn't work. seems so simple.

<html xmlns=" >
<head runat="server">
<titlemyPage</title>
<link href="CSS/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="frmMain" runat="server">
<table height="100%" bgcolor=green>
<tr height="80px">
<td>header</td>
</tr>
<tr height="*">
<td>
content here
</td>
</tr>
</table>
</form>
</body>
</html>
 
Sort by date Sort by votes
Remove this line:
<tr height="*">
Click to expand...

And replace with
<tr>
Click to expand...

When you specify the table to be 100% and specify a particular height for another row, all other rows will autofit. No need to specify a variable.


I hope you find this post helpful.

Regards,

Mark
 
Upvote 0 Downvote
What are you seeing when you say it does not work?

I hope you find this post helpful.

Regards,

Mark
 
Upvote 0 Downvote
The table is not 100% the height of the screen. the top row looks about 80 px in height.. but, the bottom row is only as big as the text in it
 
Upvote 0 Downvote
First of if you try to validate that, it will tell you that <tr> has no height attribute.
That is because the dimension attributes only work in the <td> parts of the table.

Second why are you creating a layout with tables? Try <Div>'s with some CSS.
You really should read up on CSS. and Layout

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I agree with the above suggestions and would add this: To make your page behave the same in Mozilla-type browsers as in IE, I would add the following style:

Code: 
body   {margin:0px; height:100%;}

This ensures that the table will fill 100% of the body height and not just 100% of the viewport height (the height of the browser display window). This eliminates the gap at the bottom and the vertical scrollbar in Firefox.
 
Upvote 0 Downvote
LittleDeveloper, I am lost at what you're trying to say. In Geckos table will not fill 100% of the viewport to begin with, because standards say that if parent container has not specifically set height, percentage height is equal to auto. So in the code above, table will not extend to the height of the viewport in Geckos. Your code would actually force that -- but not extending beyond the viewport. Or, better said, table would extend beyond the viewport, because it is the nature of tables to expand to fit the data. Body however would not extend beyond the viewport (you could see that if you apply a background color or something).

Incidentally, AFAIK not even that would work. Standard compliant browsers use html element as canvas, so you would need to set that one to 100% height in order to ensure height not reverting to auto. That would finally make what I describe happen. But I really don't know what you were trying to say.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
125
Alt255
Alt255
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
411
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
335
3esolar
3
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
356
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
489
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top