Fit height to page

Question

Consider a table with three rows with heights 10, *, 10. I'd like the middle cell to be high enough to fit to the page vertically. Unfortunately "height:100%" doesn't work at table, tr, or td level, possibly due to standards. Even if it happens to work, I don't want 100%, I want 100% of clientHeight-20px :) I can always write script to calculate remaining clientHeight but I wonder if it can be achieved in HTML/CSS standards.

NOTE: I'm using table just for layout, if there are other ways to lay them down in a better way I'm ok with those approaches too.

lg. · Accepted Answer

Try to leave table and use CSS. This is the first link on google (searching: css page layout) http://www.maxdesign.com.au/presentation/page_layouts/

You will spend more time at beginning, but then you will love CSS.

Regards, Lorenzo.

Ian · Answer

I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.

<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
  <tr height="20" style="background-color:grey;">
    <td>row 1</td>
  </tr>
  <tr>
    <td>row 2</td>
  </tr>
  <tr height="20" style="background-color:grey;">
    <td>row 3</td>
  </tr>
</table>
</body>
</html>

Fit <TD> height to page

Tags:

html

css

Sedat Kapanoglu

2 Answers

lg.

Ian

Recent Activity

Donate For Us