IE css - последняя строка таблицы, чтобы развернуть, чтобы заполнить оставшуюся высоту - PullRequest
Новая
       17

IE css - последняя строка таблицы, чтобы развернуть, чтобы заполнить оставшуюся высоту

0 голосов
/ 15 ноября 2010

С учетом HTML, подобного следующему, как я могу получить, чтобы последняя строка заняла оставшуюся высоту, и чтобы n-1 первые строки занимали столько высоты, сколько им нужно?

Это похоже на работу в Chrome, но не в Firefox2 или IE6 / 7/8. 

<table>
  <tr>
    <td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
    <td/>
  </tr>
  <tr>
    <td>one</td>
  </tr>
  <tr>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
  </tr>
  <tr>
    <td>full</td>
  </tr>
</table>

Таким образом, идея заключается в том, что последний ряд с "full" должен быть действительно высоким, а остальные ряды "one", "two" и "three" должны быть как можно меньше.

Я пробовал такие вещи, как точную высоту строк, скажем, "

и я пробовал 100% высоты в последнем ряду, пока не повезло!

Обновление:

Этот макет будет использоваться для различных типов контента, и предполагается, что таблица будет масштабироваться по размеру контента. Иногда div будет высоким, тогда его высота определяет высоту таблицы, но в других случаях div будет коротким, тогда строки (один, два, три) определяют высоту таблицы.

Ответы [ 2 ]

0 голосов
/ 15 ноября 2010

Если с javascript все в порядке, вы можете использовать jQuery и найти верхнюю позицию последней строки и позицию нижней части окна или элемента.Разница должна быть установлена ​​как высота последней строки.

Я еще не делал никакого кода, потому что я не был уверен, искали ли вы таблицу внутри объекта или чтобы она была заполненав нижней части окна.Я могу сделать это для вас, если вы хотите с некоторыми подробностями.

0 голосов
/ 15 ноября 2010 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
  <tr>
    <td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
    <td valign=top style="padding:0px;">
        <table height=1>
            <tr>
                <td>one</td>
          </tr>
          <tr>
                <td>two</td>
          </tr>
          <tr>
                <td>three</td>
          </tr>
          <tr>
    <td valign=top>full<br><br><br>more full</td>
  </tr>
        </table>
  </td>
  </tr>
</table>
</body></html>

Обновлено x3, работает в ie6 / ff

...