HTML таблица с 2 строками. 1 Фиксированная высота, 1 100%. Больше окна. Зачем? - PullRequest
Новая
       10

HTML таблица с 2 строками. 1 Фиксированная высота, 1 100%. Больше окна. Зачем?

1 голос
/ 03 марта 2010 
<!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 не заполняет ячейку.

Что происходит?

Ответы [ 2 ]

1 голос
/ 03 марта 2010

tr не принимает атрибут высоты. Вам нужно установить это на элемент 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>
0 голосов
/ 03 марта 2010

Проблема вызвана полями по умолчанию для элемента BODY в вашем коде. Вы указываете, что BODY должен занимать 100% доступного пространства, но по умолчанию тег BODY добавляет к этому поле, в результате чего ваши элементы занимают чуть более 100% доступного пространства экрана.

Вы можете исправить это, добавив следующее к вашему стилю BODY: 

html, body, form {
    height: 100%;
    margin: 0px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...