Fit <TD>высота до страницы - PullRequest
Новая
       24

Fit <TD>высота до страницы

2 голосов
/ 13 июля 2009

Рассмотрим таблицу с тремя строками высотой 10, *, 10. Мне бы хотелось, чтобы средняя ячейка была достаточно высокой, чтобы поместиться на странице вертикально. К сожалению, «высота: 100%» не работает на уровне таблицы, tr или td, возможно, из-за стандартов. Даже если это сработает, я не хочу 100%, я хочу 100% clientHeight-20px :) Я всегда могу написать скрипт для вычисления оставшегося clientHeight, но мне интересно, можно ли этого достичь в стандартах HTML / CSS.

ПРИМЕЧАНИЕ: я использую таблицу только для разметки, если есть другие способы, чтобы сложить их лучше, я тоже согласен с этими подходами.

Ответы [ 5 ]

4 голосов
/ 13 июля 2009

Попробуйте выйти из таблицы и использовать CSS. Это первая ссылка на Google (поиск: макет страницы CSS) http://www.maxdesign.com.au/presentation/page_layouts/

В начале вы будете проводить больше времени, но потом вам понравится CSS.

С уважением, Лоренцо.

3 голосов
/ 13 июля 2009

Я протестировал следующее в Firefox и Safari, и оно работает, хотя, возможно, это не самое удачное решение! То, что вы увидите, это высота 20 на row1, а row3 все еще применяется, а 100% составляют остальное. Если вы уберете отступы и отступы от тела, вы получите прокрутку. 

<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>
2 голосов
/ 13 июля 2009

Стиль "height: 100%" будет работать только с элементами, которые находятся внутри элемента, для которого явно установлено свойство height. В вашем случае таблица, вероятно, находится внутри тега body, а тег body не имеет установленной высоты.

2 голосов
/ 13 июля 2009

Разве это не работает? 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <!-- Date: 2009-07-13 -->
    <style type="text/css" media="screen">
        table {height: 100%; width: 100%;}
        td {border: 1px solid #000;}
    </style>    
</head>
<body>
<table>
    <tr height="10"><td>Data</td></tr>
    <tr height="100%"><td>Data</td></tr>
    <tr height="10"><td>Data</td></tr>
</table>
</body>
</html>

Это для меня.

0 голосов
/ 08 июня 2010

То же самое и здесь - простые примеры, приведенные выше, работают, в то время как моя собственная страница не "растягивает" необходимый элемент

.

На данный момент я обнаружил, что исключение DOCTYPE (таким образом, перевод браузера в режим рендеринга причуд - даже для FireFox!) Заставляет мою страницу вести себя как простые примеры, но добавление DOCTYPE к этим примерам останавливает их работу.

Полагаю, на самом деле это еще не ответ, но он показывает направление, в котором следует искать правильное решение. Надеемся, что есть способ добиться такого «растягивания» поведения без режима причуд.

РЕДАКТИРОВАТЬ: Этот ответ работал для меня. Стол оборачивается в абсолютно позиционированный полноэкранный блок. Я предполагаю, что браузер сначала вычисляет размеры div, а затем знает, как должна быть измерена таблица (и tr внутри нее). Работает с включенным DOCTYPE, облегчая, так как я не хочу использовать режим рендеринга причуд.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...