ansaurus

Question

HTML Table with 2 rows. 1 Fixed height, 1 100%. Larger than window. Why?

Answer 1

A:

The problem is being caused by the default margins on the BODY element in your code. You are specifying that the BODY should take up 100% of the available space, but by default, the BODY tag will add a margin to this, causing your elements to take up slightly more than 100% of the available screen space.

You can fix this by adding the following to your BODY style:

html, body, form {
    height: 100%;
    margin: 0px;
}

Ryan Brunner 2010-03-03 14:23:11

Unfortunately this isn't the issue. The scrolling area is much larger and seems to be the size of the title row at the top.

haymansfield 2010-03-03 14:27:22

What browser are you using? In Firefox this fixes the issue. IE has odd ways of dealing with box models, so you may be seeing different behaviour if you're using that.

Ryan Brunner 2010-03-03 15:19:24

It's simple what's going on: #MainTitle + td.MainMenu = 100% + 70px height that add at bottom.

easwee 2010-03-03 15:40:32

I'm using ie8 but I just tested it in Firefox and its still there.

haymansfield 2010-03-03 16:09:28

Answer 2

+1 A:

tr does not accept height attribute. You need to set that on td or th element. This code should do the work.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
    html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;}
    tr th {height:70px;}
    tr td {background-color: blue;position:relative;vertical-align:top;}
    .text {position:relative;height:100%;width:100%;background:yellow;}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
  <table id="Main" cellpadding="0" cellspacing="0"> 
        <tr>
            <th>Title</th>
        </tr>       
        <tr>
            <td><div class="text">Test</div></td>     
        </tr>
  </table>
</form>
</body>
</html>

easwee 2010-03-03 15:43:42

This does give the correct table layout but the containing div where you have 'Test' would not be able to fill the cell as its height would degrade to auto as its parent element has no assigned height.

haymansfield 2010-03-03 16:13:06

I edited the answer - i thought you don't need the inside div. Check it now - the inside div fits nicely.

easwee 2010-03-03 16:25:32

Unfortunately this only works in quirks mode. If you add the doctype to move to standards it no longer works.

haymansfield 2010-03-03 22:48:53

Damn, forgot about dtd - was writing in notepad. Now this seems like an interesting thing to fix.

easwee 2010-03-04 10:05:36

ansaurus

tags:

views:

answers:

HTML Table with 2 rows. 1 Fixed height, 1 100%. Larger than window. Why?

related questions