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 biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

table extension to bottom of screen

Status
Not open for further replies.
tfstom

tfstom

Programmer
Sep 28, 2002
190
US
I have a set of tables I am trying to set up to extend to the bottom of the page or the end of the page - whichever is greater.

What I have is a table with 3 rows.

The top row is the top of my page with my logo (mostly blue) and some menus.
The bottom row is the bottom of my page (blue).
The middle row has a 2 column table, where the left cell is also blue with some buttons on it.

That frames my page.

The right cell of the middle row is where my content is. The size of the page is determined by my content area.

What I want to do is to make sure the bottom row is always at the bottom of my page - even if there is only one line of data in the content.

My page looks like:
**********************************************************
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="750" border="1" cellspacing="0" cellpadding="0" bordercolor="#000099">
<tr>
<td><img src="file:///C|/Inetpub/ width="750" height="100"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" bgcolor="#000099">&nbsp;</td>
<td><p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#000099">&nbsp;</td>
</tr>
</table>
</body>
</html>
**********************************************************

Thanks,

Tom.
 
Sort by date Sort by votes
You need to tell your table to be 100% tall. With tables, you can do this. Then you need to tell how tall some of the rows will be, except for your content row, which will fill the rest. Don't forget to use valign="top" anywhere where you might encounter text being in the middle of the cell. Here's the code:
Code: 
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table height="100%" width="750" border="1" cellspacing="0" cellpadding="0" bordercolor="#000099">
  <tr height="100">
    <td><img src="file:///C|/Inetpub/[URL unfurl="true"]wwwroot/ContourAerospace/images/kc_logo_intranet_hr.jpg"[/URL] width="750" height="100"></td>
  </tr>
  <tr>
    <td valign="top">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="150" bgcolor="#000099">&nbsp;</td>
          <td>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr height="50">
    <td bgcolor="#000099">&nbsp;</td>
  </tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Unless I'm mistaken height=100% doesn't work in Netscape. Has that changed?

Following uses a spacer graphic and a nested table to accomplish what you are trying to do.

Code: 
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
	<table cellpadding=3 width=750 border=0 cellspacing=0>
	<tr>
		<td height=50 colspan=3>Title graphic here</td>
	</tr>
	<tr>
		<td width=1 bgcolor="#000099"><img src="images/spacer.gif" width=1 height=400></td>
		<td bgcolor="#000099">menu</td>
		<td width=150 valign=top>
			<table cellpadding=2 border=0 cellspacing=0 width=600>
				<tr>
					<td>Body text goes here.
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan=3 bgcolor="#000099">&nbsp;</td>
	</tr>
</table>
</body>
</html>

Hope it helps!

Wow JT that almost looked like you knew what you were doing!
 
Upvote 0 Downvote
Close. But in Vragabond, it moves the third row down to the bottom of the screen, like I wanted, but it doesn't extend the menu section on the left of the 2nd row. It leaves a big area on the left with white space, but the content area is the way I want it. As I add to the content the left side extends until it reaches the top of the bottom row and then they both (including the content area) starts moving down, which is what I want. But why doesn't the left side start out completely extended.

In Netscape 7.1, it works exactly the same way. But it also has a grey line bordering the rows (which IE doesn't and I don't want) - I want it to be all blue.

Also, I noticed in Dreamweaver MX, it doesn't start out extended at all.

In Pixl8rs example, the graphic is a little to the right of the menu section and has a little white space between the graphic and the menu section. The interesting thing was that it moved a little right when I said to align left. Also, it starts out larger that the screen size. I don't understand why the spacer.gif is there. What is it used for?

Also, is there A way to get rid of the gutter (white space around the main table between the edges of the window and the table).

Thanks,

Tom.
 
Upvote 0 Downvote
Ok, I wasn't aware that blue part was the menu and that it should extend all the way. It does in this example however. As for the border in Netscape, try defining it in CSS rather than html, it gives you much more freedom to style it the way you want. Corrected code:
Code: 
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table height="100%" width="750" border="1" cellspacing="0" cellpadding="0" bordercolor="#000099">
  <tr height="100">
    <td><img src="file:///C|/Inetpub/[URL unfurl="true"]wwwroot/ContourAerospace/images/kc_logo_intranet_hr.jpg"[/URL] width="750" height="100"></td>
  </tr>
  <tr>
    <td valign="top">
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="150" bgcolor="#000099">&nbsp;</td>
          <td>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr height="50">
    <td bgcolor="#000099">&nbsp;</td>
  </tr>
</table>
</body>
</html>
If you want to employ a css solution try giving table you want to have a border a class like <table class="maintable" ...> and add <style> to the head of your document where you define the borders. Note that you will have to change the border="1" to 0 in your table then. Add this to your head:
<style type="text/css">
.maintable {
border: 2px solid #000099;
border-collapse: collapse;
}

.maintable td {
border: 2px solid #000099;
}

.maintable td td {
border: none;
}
</style>
[/code]
 
Upvote 0 Downvote
Oh, to get rid of the gutter, also employ the css, add to your style the following:
Code: 
<style type="text/css">
 body {
  margin: 0;
  padding: 0;
 }
</style>
 
Upvote 0 Downvote
That was what I was looking for.

I did have a couple of questions.

It seems that all I need in the body selector is the "margin:0". The padding doesn't seem to do anything (unless I am missing something).

With the .maintable sections, don't I have to put them somewhere in the tags as classes? Also, why do you have 3 of them?

Thanks,

Tom.
 
Upvote 0 Downvote
Setting padding to 0 is for cross-browser compatibility. Opera still displays the gutter if you do not set the padding. As for the class, yes, you have to apply it to the outer table. I did mention that. The borders in CSS work a little differently than specifying the border attribute in table tag. The css border in table tag refers only to the outer border of the table. In that way, the table will have a border around it, but the specific cells won't. To add border to specific cells, you need to apply such a class to them as well. I took a shortcut saying that every td element inside the table which has a class maintable should also have the same border. This however caused a problem with the inner table -- that table had <td>s inside the main table so I hade to state that <td>s inside other <td>s inside the <table> with a class "maintable" have no border. I hope it makes sense. If you just want a border around the main table, you can delete everything but the first entry in css.
 
Upvote 0 Downvote
It looks like you got what you needed but to answer your question on the spacer graphic...

The spacer graphic (and you would need to create your own) is a transparent 1x1 gif. They are frequently used for forcing tables (via insertion in a cell) to hold certain widths or heights in a manner that doesn't suffer from any cross browser problems. Because the graphic is transparent you can make it whatever width or height you want to to maintain the spacing you are needing.

So in your case if the table was to big for the initial load you would simply decrease the size of the spacer.gif. That is what is holding the table to the height it is maintaining.

Another way to apply a margin fix is use:

Code: 
<body topmargin=0 leftmargin=0>

Glad you got what you needed!

Wow JT that almost looked like you knew what you were doing!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
827
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
775
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top