За последние 24 часа нас посетили 17107 программистов и 1835 роботов. Сейчас ищут 1718 программистов ...

Высота <div> по размеру ячейки таблицы

Тема в разделе "HTML и CSS", создана пользователем rolling, 24 июл 2012.

  1. rolling

    rolling Активный пользователь

    С нами с:
    20 авг 2009
    Сообщения:
    75
    Симпатии:
    0
    Добрый день!
    Есть следующая ситуация
    Код (Text):
    1.  
    2.  <td>
    3.      <div>
    4.           ...............
    5.      </div>
    6.  </td>
    Нужно, чтобы <div> по высоте растягивался на всю ячейку таблицы не зависимо от количества контента в нем.
    Подскажите п-ста, как такое можно реализовать?
     
  2. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    видтх: 100%;
    хеигхт: 100%;
    маргин: 0;

    в родителе соотв паддинг: 0;
     
  3. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.099
    Симпатии:
    1.243
    Адрес:
    там-сям
    это не будет работать. я бы полагался на стилизацию самого td, который по самой природе уже нужной высоты )))
     
  4. Код (Text):
    1. <td id='ololo'>
    2. <script type='text/javascript'>
    3. document.write('<div height='+document.getElementById('ololo').clientHeight+'></div>');
    4. </script>
    5. </td>
    чем не вариант???
     
  5. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.099
    Симпатии:
    1.243
    Адрес:
    там-сям
    Где-то было написано, что грязные хаки с JS тоже подойдут?

    На самом деле решения на CSS есть, если гуглить "колонки одинаковой высоты". Только как-то печально иметь таблицу, в которой все работает именно как надо от природы и к этому добавлять ещё какую-то хитрую жопу.
     
  6. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    эм
    Код (Text):
    1. <table style="width: 500px; height: 500px;">
    2.   <tr>
    3.     <td style="
    4.         border: 1px solid green;
    5.         padding: 0;;">
    6.       <div style="
    7.            border: 1px solid red;
    8.            height: 100%;
    9.            margin: 0;
    10.            width: 100%;">a</div>
    11.     </td>
    12.   </tr>
    13. </table>
    работает заипись
     
  7. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.099
    Симпатии:
    1.243
    Адрес:
    там-сям
    А ты не поленись, сделай две TD в одной TR и в каждой ячейке разное количество строк текста. Заипешся, да.
     
  8. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    беда =(

    походу, решения нет.
     
  9. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Зачем вообще делать дивы в таблицу?)

    Что у вас там табличная верстка (хотя это даже версткой не назовешь), сплошные костыли...
     
  10. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    сам ты костыль =)
    все теги равноправные. а вот, то что ширина и высота вложенного дива отличается от родителя, при этом маргин и паддинг соотв равны нулю =) по факту - ебаный стыд
     
  11. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Код (PHP):
    1. <!DOCTYPE html>
    2. <style type="text/css">
    3.     table{width:200px;height:100%;border:1px solid #ff0000;}
    4.     table tr td div{height:100%;border:1px solid #000000;background-color:#ff00ff;}
    5. </style>
    6. <table>
    7.     <tr>
    8.         <td>
    9.             <div>
    10.                 Тра - ля, ля...
    11.                 Тра - ля, ля...
    12.                 Тра - ля, ля...
    13.                 Тра - ля, ля...
    14.                 Тра - ля, ля...
    15.                 Тра - ля, ля...
    16.                 Тра - ля, ля...
    17.                 Тра - ля, ля...
    18.                 Тра - ля, ля...
    19.                 Тра - ля, ля...
    20.                 Тра - ля, ля...
    21.                 Тра - ля, ля...
    22.                 Тра - ля, ля...
    23.                 Тра - ля, ля...
    24.                 Тра - ля, ля...
    25.             </div>
    26.         </td>
    27.         <td>
    28.             <div>
    29.                 Тра - ля, ля...
    30.             </div>
    31.         </td>
    32.     </tr>
    33. </table> 
    [​IMG]

    Код (PHP):
    1. table tr td{width:15%;} 
    [​IMG]
     
  12. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.099
    Симпатии:
    1.243
    Адрес:
    там-сям
    в ff и ie не работает. вот что я называю "жопой" ))) столько усилий и непонятно зачем

    Добавлено спустя 6 минут 15 секунд:
    вот кое-что: http://learn.javascript.ru/height-percent
     
  13. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Ну пожалуйста так сделай и все будет работать везде...

    Код (PHP):
    1. table{width:200px;height:100%;border:1px solid #ff0000;}
    2. table tr td{width:15%;height:100%;}
    3. table tr td div{height:100%;border:1px solid #000000;background-color:#ff00ff;}
    4.  
    Хоть в жопу носом.
     
  14. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.099
    Симпатии:
    1.243
    Адрес:
    там-сям
    а хрен там! ))) ты идешь в неправильном направлении. правильно — упрощать разметку и стили. здесь просто не нужен div
     
  15. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Код (PHP):
    1. table{width:200px;border:1px solid #ff0000;}
    2. table tr td{width:15%;border:1px solid #000000;background-color:#ff00ff;vertical-align:top;} 
    И на х этот див =)