Question

<!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>

（编辑）我试图简化这个问题。我有一张桌子。我希望顶部标题行的大小固定，下一个内容行填充剩余的屏幕。

正如我所设置的那样内容单元格是高度：100％然后页面大于窗口（按标题行的大小）但是如果我将其切换为自动，则单元格的大小适合于窗口，但包含的div不填充单元格。

怎么回事？

Answer 1

tr不接受height属性。你需要在td或th元素上设置它。这段代码应该可以完成工作。

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

Answer 2

问题是由代码中BODY元素的默认边距引起的。您指定BODY应占用可用空间的100％，但默认情况下，BODY标记会为此添加一个边距，导致您的元素占用可用屏幕空间的100％以上。

您可以通过在您的BODY样式中添加以下内容来解决此问题：

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

HTML表有2行。 1固定高度，1 100％。比窗户大。为什么？

2 个答案: