За последние 24 часа нас посетили 26730 программистов и 1482 робота. Сейчас ищут 935 программистов ...

Проклятый height: 100%

Тема в разделе "HTML и CSS", создана пользователем Freakmeister, 29 янв 2012.

  1. Freakmeister

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

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Столкнулся с такой проблемой как блоки внутри таблицы.
    Как сделать блок #second высотой в 100% от родителя?
    http://jsfiddle.net/rDfgW/
     
  2. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Доктайп поставь такой
    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    5.         <title>Привет, Мир!</title>
    6.         <style type="text/css">
    7.             html, body, table {
    8.                 width: 100%;
    9.                 height: 100%;
    10.             }
    11.             tr.header {
    12.                 height: 71px;
    13.             }
    14.             tr.footer {
    15.                 height: 100px;
    16.             }
    17.             div.cd {
    18.                 height: 100%;
    19.                 border: solid 1px black;
    20.             }
    21.         </style>
    22.     </head>
    23.     <body>
    24.         <table>
    25.             <tr class="header">
    26.                 <td>asd</td>
    27.                 <td>qwe</td>
    28.                 <td>zxc</td>
    29.             </tr>
    30.             <tr>
    31.                 <td>qwe</td>
    32.                 <td><div class="cd">asd</div></td>
    33.                 <td>zxc</td>
    34.             </tr>
    35.             <tr class="footer">
    36.                 <td>zxc</td>
    37.                 <td>qwe</td>
    38.                 <td>asd</td>
    39.             </tr>
    40.         </table>
    41.     </body>
    42. </html>
     
  3. asokol

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

    С нами с:
    17 янв 2012
    Сообщения:
    162
    Симпатии:
    0
    sobachnik, как мне кажется, это не совсем то, что требуется.

    Насколько я знаю, в данном случае блок second не сделать высотой в 100% от родителя с помощью CSS, если не известна высота родителя.
     
  4. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Ну, браузеру-то высота известна, он же её всё равно по каким-то своим правилам рассчитывает, чтобы картинку нарисовать на экране. При указанном выше доктайпе высота дива (у которого height: 100%) внутри другого элемента будет равна высоте другого элемента. При всех остальных известных мне доктайпах высота внутреннего дива будет подгоняться под контент.
     
  5. Апельсин

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

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Родитель должен иметь указание высоты в пикселях, чтобы потомок вытягивался на 100% по высоте.
    Сраные стандарты браузеров.
     
  6. asokol

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

    С нами с:
    17 янв 2012
    Сообщения:
    162
    Симпатии:
    0
    Апельсин, почти так. Пример sobachnik'а работает, но у таблицы 100% высота.
    sobachnik, попробуйте убрать у table height:100%;

    Я не исключаю, что есть решение на CSS, которое мне просто неизвестно.
     
  7. Freakmeister

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

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Вот такой вариант работает с 4.01 Transitional:
    http://jsfiddle.net/dCDNe/
    Спасибо, sobachnik!
     
  8. asokol

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

    С нами с:
    17 янв 2012
    Сообщения:
    162
    Симпатии:
    0
    Можете показать полностью код и указать, в каких браузерах работает? Просто у меня ни в одном не захотело. Может я что-то неправильно делаю?