FF не понимает высоту в процентах!?

Xoce · №1

Код:

<table border="1" style="width: 21%; height: 100%;">
<tr>
    <td height="1%">
        <div style="width: 100%; height: 100px;">
            1
        </div>
    </td>
</tr>
<tr>
    <td height="99%">
    
        <div style="width: 100%; height: 100%; border: solid 1px red; overflow: scroll;">
            <div style="width: 100%;">
            sdv
            <hr size="1" width="400">
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>            sv
            </div>
        </div>
    
    </td>
</tr>
</table>

Почему не работает?
__

ragnaar · №2

==> Разработка

Xoce · №3

==> Разработка

жесть... нужно ждать 3 версии..?

ragnaar · №4

Xoce
Это принятое на нашем форуме обозначение переноса в другой раздел сообщения размещенного не в том разделе (несоответствие тематики сообщения), в данном случае я перенес сообщение из Firefox в раздел Разработка.

Shutnik · №5

Xoce
всё работает корректно, содержимому таблицы просто некуда деваться в данном случае, поэтому размер изменяется

Dark-Demon · №6

пропиши для таблицы
table-layout: fixed

Xoce · №7

shutnik
содержимому таблицы просто некуда деваться в данном случае, поэтому размер изменяется

Как сделать чтобы ему было куда деваться? Это поможет добиться желаемого результата?

Dark-Demon
пропиши для таблицы
table-layout: fixed

Выделить код

Код:

<table border="1" style="width: 21%; height: 100%; table-layout: fixed;">

результат не изменился

Отредактировано Xoce (28-12-2006 13:36:43)

Dark-Demon · №8

!important добавлять пробовал? а протисывать высоту для tr?

Xoce · №9

Dark-Demon
.... вы сами-то не уверены, зачем тогда предлагаете? получается флуд?

ragnaar
Правильно ли я понимаю, что описанная мной проблема относиться к движку Геко и теоретически код должен работать?

Al_H · №10

Скорее всего, описанная проблема в том, что Gecko действует в пределах стандартов. Но, например, div с height: 100%; отсчитывает высоту не от родительского элемента. Точно не помню, но вроде бы высота считается от высоты окна.
А в чем проблема указать overflow: scroll; непосредственно в td?

Dark-Demon · №11

Al_H, ртфм http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property

Xoce, да, именно так и получается. ты кода не привёл, чего хочешь добиться не сказал...

Xoce · №12

Al_H

Но, например, div с height: 100%; отсчитывает высоту не от родительского элемента. Точно не помню, но вроде бы высота считается от высоты окна.

В том-то и дело, что оно так и есть... и я спрашиваю, разве это по стандартам? Спрашиваю т.к. плохо знаю язык
чтобы читать стандарты на английском, к сожалению...

Dark-Demon

Xoce, да, именно так и получается. ты кода не привёл, чего хочешь добиться не сказал...

Вы реально не внимательны или у вас отключен показ картинок в браузере.
1. Код привёл (пытаюсь узнать почему логичный код не работает логично..?)
2. Картинку с нужным результатом нарисовал.

Дело в том, в в IE я знаю как добиться нужного результата. Хочу добиться того же и для FF, если это возможно. А если не возможно, то разобраться где и/или в чем проблема.

ЗЫ.
Если FF, работает исключительно по стандартам, а описанная мной проблема явно показывает не логичность (не правильность) выполнения кода, значит плохой не FF, а стандарт. Значит FF, является заложником плохого стандарта?
Тогда в чем разница между IE (зависящим от Microsoft) и FF (зависящим от www.w3.org) ?

Denton · №13

Вначале тоже не догонял чего вам нужно. Неплохо было бы показать результат в Firefox'е.
По ссылке представленной Dark-Demon'ом и кроется ответ:

If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'.

То есть, если я правильно понимаю, у вас высота 99% от 100% от auto итог = auto. Ячейка растянется до высоты контента.

Отредактировано Denton (11-01-2007 15:45:16)

Xoce · №14

Вот как это выглядит в FF :cry:

ff-bad....gif

Denton

у вас высота 99% от 100% от auto итог = auto. Ячейка растянется до высоты контента.

Я не понял...

Al_H · №15

На самом деле, не правы ни я, ни вы.
Ближе всего к разгадке подошел
Denton

То есть, если я правильно понимаю, у вас высота 99% от 100% от auto итог = auto. Ячейка растянется до высоты контента.

А причина вот в чем. В режиме strict, если указать html,body {height: 100%;} он вполне нормально масштабирует ячейки, и даже в % от родительского элемента. То есть проблема вовсе не в height.
Проблема - в overflow. Прокрутка появляется, если контент превышает размеры элемента. При фиксированных размерах все ясно. А вот с % гораздо сложнее.
Смотрите, у Вас table 100% от документа, который 100% от окна или контента (мы так задали). Контент - это table. То есть растяжение table увеличивает документ - это нормально. Строка 99% от таблицы, которая растягивается. То есть размер таблицы определяется контентом строки. div 100% высоты ячейки, но высота ячейки определяется высотой контента. А вот как раз ширина ячейки задана не зависимо от контента.
Итог - убираем переводы строки - все встает на место. Прокрутка в любом случае появляется только горизонтальная.
А вот divами это решить было бы гораздо реальнее.

Dark-Demon · №16

1. Код привёл (пытаюсь узнать почему логичный код не работает логично..?)

это только маленький отрывок. ты как минимум не привёл используемый доктайп.

Xoce · №17

ff-bad..2.gif

Al_H

А вот divами это решить было бы гораздо реальнее.

Вы считаете? Интересно было бы увидеть пример?
Я использую таблицу не от хорошей жизни. Дело в том что, как я показал на картинке, мне нужно подружить жёсткие размеры (px) с относительными (%), причём по вертикали!

Собственно, почему по горизонтали можно, а по вертикали нельзя? (это я риторически) Было бы логично предположить, что работать должно одинаково: и по горизонтали и по вертикали, не правда ли?

Daenur · №18

У меня такая же проблема. Если появилось решение, напишите сюда.

dima_u · №19

<body onResize="myfunc">
function myfunc(){
$('Div').style.height=document.body.clientHeight-100;
}

Немного коряво, но у меня вполне работает.

Al_H · №20

Xoce
При указанной Вами раскладке - объединение ячеек справа и фиксированная высота верхней ячейки слева - ожидается проблема в Internet Explorer некоторых версий. При добавлении контента в бОльшую ячейку, верхняя ячейка с фиксированной высотой начнет неконтролируемо расползаться по вертикали.

Житель Земли · №21

Лучше поздно, чем никогда:

Выделить код

Код:

<DIV Style="position: fixed; top: 0px; left: 0px; height: 100px; z-index: 777; width: 475px; overflow: auto; border-right: 5px solid;">
  <DIV Style="height: 3500px;">
    100px
  </DIV>
</DIV>
<DIV Style="position: fixed; top: 100px; bottom: 0px; left: 0px; z-index: 777; width: 475px; overflow: auto;  border-right: 5px solid;">
  <TABLE Style="width: 100%; border: 15px dotted;">
    <TR>
      <TD>
        <DIV Style="height: 3500px;">
          Для overflow.
          <BR>
          <BR>
          По ширине таблица зависима от содержания
        </DIV>
      </TD>
    </TR>
  </TABLE>
</DIV>

Может кому-то пригодится.

Отредактировано Житель Земли (27-12-2011 23:43:16)

Полезная информация