CODEWITHSUNDEEP
htmlcss
haymansfield
haymansfield

Reputation: 5647

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>


    <style type="text/css">


    html, body, form, table, tbody, tr {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        border-style: none;
    }

    tr#MainTitle
    {
        height: 70px;
    }

    div#test {
        height: 100%;
        background-color: blue;
    }

    /* If I remove the 100% here then the scrollbars are removed  and the cell still fills the window but the div no longer fills the cell. */

    td.MainMenu {
        background-color: red;
        height: 100%;
    }
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
  <table id="Main"> 
    <tbody>

        <tr id="MainTitle">
            <td>Title</td>
        </tr>       

        <tr id="MainMenuRow">
            <td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>     
        </tr>
    </tbody>
  </table>
</form>
</body>
</html>

(edit) I've tried to simplify the issue. I have a table. I want the top title row to be fixed in size and the next content row to fill the remaining screen.

As I have it set up if the content cell is height:100% Then the page is larger than the window (by the size of the title row) yet if I switch this to auto the cell is the right size for the window but the contained div does not fill the cell.

Whats going on?

Upvotes: 1

Views: 1960

Answers (2)

easwee
easwee

Reputation: 15915

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>

Upvotes: 1

Ryan Brunner
Ryan Brunner

Reputation: 14851

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;
}

Upvotes: 0

Related Questions