как сделать полную высоту ячейки в полную высоту таблицы в Internet Explorer - PullRequest
Новая
       45

как сделать полную высоту ячейки в полную высоту таблицы в Internet Explorer

2 голосов
/ 15 февраля 2011

У меня следующий HTML-код 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <style type="text/css">
    html {height:100%;}body {height:100%;margin:0;}
    h1 {form-size:20px;margin:0;padding:20px;}
  </style>
</head>
<body>
  <table style="width:100%;height:100%">
   <tr>
     <td>
       <div style="background-color:#f00;">
         <h1>This text should make height of this cell</h1>
       </div>
     </td>
   </tr>
   <tr style="height:100%;" id="row">
     <td style="background-color:#c0c;">
       <div style="height:100%;width:100%;background-color:#00f;color:#fff;">
         This cell should take all unused space of table
       </div>
     </td>
   </tr>
   <tr>
     <td>
       <div style="background-color:#0f0;">
        <h1>This text should make height of<br> this cell</h1>
       </div>
     </td>
   </tr>
  </table>
</body>
</html>

Он отлично работает во всех браузерах - кроме IE, где синий div внутри средней ячейки занимает место только для текста.Может быть, кто-то знает, как растянуть его на все свободное место внутри таблицы?

ОБНОВЛЕНИЕ: Я знаю, что таблицы плохи в макете страницы.если вы можете показать мне пример макета div, который имеет верхний и нижний блок с переменной высотой и среднюю часть, которые используют все свободное пространство окна браузера, я буду использовать его.Обещаю =)

Ответы [ 3 ]

8 голосов
/ 15 февраля 2011

Не используйте таблицы для разметки, пожалуйста,

Используйте Divs и CSS. Использование таблиц считается плохой практикой:

Tables

http://shouldiusetablesforlayout.com

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Демонстрация в реальном времени, преобразованная в DIV

1 голос
/ 15 февраля 2011

Если вы определяете height для элемента body, тогда синяя ячейка расширяется, чтобы заполнить доступное пространство ( JS FIddle demo ). Проблема в том, что элемент height: 100% занимает полную высоту своего родительского , и для этого браузер должен знать (быть сказано), какова высота этого родительского элемента .

Этого можно добиться с помощью JavaScript ( JS Fiddle Demo ) (или любой из различных библиотек, например, jQuery: JS Fiddle demo 1 ), или используя: 

table {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JS Fiddle demo

<ч />
  1. Понятия не имею, почему использование версии jQuery приводит к прокрутке. Я пытался удалить padding, margin и т. Д. Из различных элементов (body и table), но это приводит к тому же поведению. Что немного странно для меня.
0 голосов
/ 02 февраля 2012

Использование <div> должно выглядеть примерно так: 

<div style="width:100%;height:100%;background-color:#00f;color:#fff;">

    <div style="background-color:#f00;">
        <h1>This text should make height of this cell</h1>
    </div>

    This cell should take all unused space of table


    <div id="footer" style="background-color:#0f0; position:absolute; bottom:0px;width:100%;">
        <h1>This text should make height of<br> this cell</h1>
    </div>

</div>

Контент в центре находится не внутри <div>, а в самом основном <div>. :)

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

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

...