LINUX.ORG.RU

Проблема height:100% в FireFox

 ,


0

1

Всем привет!

Помогите решить проблему атрибута height:100% в Firefox. Вроде проблема распространенная, но все решения, которые нагуглил, у меня не сработали.

Итак, есть таблица, которая должна полностью помещаться на весь экран и не более. У нее есть строки/столбцы, размер которых задается в пикселях, остальные строки/столбцы должны растягиваться на все оставшееся пространства. То есть резиновость. В одной ячейке есть DIV с картинками; если картинок больше чем помещается на экран, то в DIV'е должен появляться скролл, то есть overflow-y:scroll. При этом весь сайт (вся таблица) не должен вылазить за границу экрана (браузера).

Вот пример который работает в Opera в точности так как мне нужно, но в FireFox размер DIV'a почему-то не уменьшается до нужной высоты.
(Картинку можете заменить на свою любимую)

Как заставить в FireFox показывать правильно?

<html>
  <head>
    <style type="text/css">
      img{
        display:block;
        max-width:100px;
        max-height:100px;
      }
    </style>
  </head>
  <body>
    <table style="border:1px solid red;width:100%;height:100%;max-height:100%;">
      <tr>
        <td style="border:1px solid green;width:150px;height:100px;vertical-align:text-top;">text1</td>
        <td style="border:1px solid green;">Text2</td>
      </tr>
      <tr>
        <td style="border:1px solid green;vertical-align:top;">
          <div style="height:100%;overflow-y:scroll;">
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
            <img src="http://goasingingsuperstar.com/images/stories/sample_image1.jpg" />
          </div>
        </td>
        <td style="border:1px solid green;">
          <textarea style="width:100%;height:100%;">
          </textarea>
        </td>
      </tr>
  </body>
</html>

★★★★★

height в процентах считается от высоты родителя. Если она auto, height будет проигнорирован. Поэтому нужен как минимум еще html, body {height: 100%;}

Yasenfire ()
Ответ на: комментарий от Yasenfire

height в процентах считается от высоты родителя.

Только вот высота родителя считается из высоты контента. И что с этим делать?

Поэтому нужен как минимум еще html, body {height: 100%;}

Не работает.

Kroz ★★★★★ ()

Я как-то реализовывал одно веб-приложение, там требовалось такое же поведение: чтобы приложение было в границах окна, как по ширине, так и по высоте. Сходи по ссылке, там должно быть все понятно.

Boba_Fett ()

cssreset

сначала скачай и подключи себе cssreset.css он сбросит все настройки сначала

svbar2003 ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.