Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > style='height:100%;overflow:auto' в Лисе

Автор: Elfet 19.2.2006, 12:32

Код


<html>
<head>
  <title></title>
</head>
<body>
<table width="100%" height="100%" cellspacing="1" cellpadding="0" border="1">
  <tr>
    <td>
      <div style='height:100%;overflow:auto'>    

      </div>    
    </td>
    <td width="200">
      <div style='height:100%;overflow:auto'>    

      </div>        
    </td>
  </tr>
  <tr>
    <td height="100">fgh</td>
    <td height="100">fgh</td>    
  </tr>
</table>
</body>
</html>

Вот, такая вот штука работает в MSIE а в Firefox`е не работает. Что можно сделать?

Автор: Str!pe 19.2.2006, 14:25

Если не отрабатывает overflow:auto то тут только делать добавляя полосу прокрутки руками.

Автор: Elfet 19.2.2006, 21:55

А это как? Руками?

Автор: R.M. 20.2.2006, 11:39

Elfet, а доктайп в коде присутствует?

Автор: Str!pe 20.2.2006, 16:22

Или меня глючит от работы или я ничего найти не могу... сижу и втечении всего дня ищу как это делается... БЫЛА ЖЕ на Винграде эта тема!

Автор: Alx 20.2.2006, 19:09

ты лучше при загрузке сразу посчитай offsetHeight ячейки и посдатвь его в стиль, вместо 100%

Автор: Elfet 20.2.2006, 19:58

Куксикус, доктайп? smile

Alx, можено, конечно, а потом на онресизе тоже менять размеры smile

, но не хочеться коды писать smile

Автор: R.M. 21.2.2006, 11:14

Elfet, да, тег такой в (X)HTML есть <!DOCTYPE> и влияет он на кроссбраузерность

Автор: smartov 21.2.2006, 16:01

Elfet,
Лиса 1.5.0.1
iExplore 6.0 SP2
Код приведенный тобой выглядит абсолютно одинаково и там и там (если не считать margin у body)
Добавлено @ 16:02
P.S. Opera 9.0 TP2 - тоже все зашибись

Автор: Elfet 21.2.2006, 21:34

Лиса - Нет она не так отображает, она не строит overflow:auto

Автор: December 7.3.2006, 17:42

Бьюсь с той же проблемой
В осле работает как задумано
В Опере - криво, но работает
FF 1.0.3 - вообще нет скроллбаров
Вот размётка попроще:

Код


<!doctype html public "-//w3c//dtd html 4.0 Transitional//en">
<html>
<head>
  <title>Test</title>

<style>
body {
  overflow: hidden; 
  margin: 0px;
  padding: 0px;
  }
div#pagetop {
  margin: 0px;
  padding: 0px;
  background-color: #99ccff;   
  height: 100%;
  }
div#pagebody {
  margin: 0px;
  padding: 0px; 
  height: 100%;
  overflow: auto;
  background-color: #EEEEEE;
  }
table {
  margin: 0px;
  padding: 0px;
  border-collapse:collapse;
  }
tr {
  margin: 0px;
  padding: 0px;
  }
td {
  margin: 0px;
  padding: 0px;
  }
p {
  margin: 0px;
  padding: 0px;
  }
</style>
</head>

<body>
<table width="100%" height="100%">
<tr height="40">
  <td>
    <div id="pagetop">
      <p>This is top text that should be visible and not scrollable.</p>
      <p>With second line.</p>
    </div>
  </td>
</tr>
<tr>
  <td>
    <div id="pagebody">
    <!-- begin content -->
    <p>This fragment should be scrollable if it does not fit the window.</p>

    <ul>
      <li>List item 0
      <li>List item 1
      <li>List item 2
      <li>List item 3
      <li>List item 4
      <li>List item 5
      <li>List item 6
      <li>List item 7
    </ul>
    <!-- end content -->
    </div>
  </td>
</tr>
</table>

</body>
</html>

Есть идеи, как добиться одинакового поведения в вышеперечисленных бродилках?

Автор: December 7.3.2006, 18:11

Старая тема схожей тематики (пардон за тавтологию smile

)
http://forum.vingrad.ru/index.php?showtopic=58976

Автор: Greendrake 7.3.2006, 18:32

Цитата(Stripe @ 20.2.2006, 16:22)

http://forum.vingrad.ru/index.php?showtopic=56866&hl=100%

Она?

Автор: smartov 7.3.2006, 18:41

Elfet,

Цитата(Elfet @ 21.2.2006, 20:34

)

Нет она не так отображает, она не строит overflow:auto

Цитата(smartov @ 21.2.2006, 15:01

)

Лиса 1.5.0.1

Автор: Elfet 19.3.2006, 22:38

Кто-нибудь что-нибудь придумал? smile

Автор: smartov 20.3.2006, 12:31

Ну как... Например, если задать высоту блоку - все будет в порядке smile

Автор: Elfet 20.3.2006, 15:37

Да, знаю

Но очень хочеться height:100% smile

Автор: December 21.3.2006, 13:29

Нет, с лисой - болт.
Я конкретно продолбался с этим, в опере и осле всё зашибись, в лисе - фиг.
Пришлось делать на скриптах...

Автор: AztEK 21.3.2006, 18:59

Я задавал такой вопрос (http://forum.vingrad.ru/index.php?showtopic=81632) - мне не ответили никак smile

Автор: Ciber SLasH 22.3.2006, 04:27

Можно попытаться задать этот вопрос в форуме Maniac-а. У него, судя по статьям в блоге, большой опыт в CSS: http://softwaremaniacs.org/forum/index.php
Я его пытался привлечить к нашему форуму, но не получилось... может у вас получится...
Добавлено @ 04:28
Мне он помог в одном вопросе. smile

Автор: December 22.3.2006, 13:30

Мне кажется, это вообще невозможно без скриптов с текущими версиями бродилок (я не говорю уже про маковские чуда). Дело в том, что в лисе padding у дива влияет на его общую ширину, а опере и осле - нет. Вот, для примера, как оно у меня работает:

Код

function AdjustContentSize()
{
  var cDiv = document.getElementById("pagebody");
  if (Engine == enGecko)//amend padding
    {
      var w = document.body.clientWidth;
      cDiv.style.width = w - 32;
    }
  var h = document.body.clientHeight;
  var diff = 44;
  if (Engine == enGecko) diff = diff + 6;
  cDiv.style.height = h - diff;
}

и, для комплекта, сами дивы:

Код

div#pagetop {
  margin: 0px;
  padding: 0px;
  background-color: #99ccff;   
  height: 44;
  width: 100%;
  border-bottom: 1px solid #999999;
  }
div#pagebody {
  margin: 0px 0px 4px 0px;
  padding: 5px 10px 0px 22px;
  height: 100px;
  width: 100%;
  overflow: auto;
  background-color: #FFFFFF;
  vertical-align: top;
  }

Как видите, приходится немного шаманить...

Автор: Elfet 22.3.2006, 14:20

Походу только на скриптах smile

Автор: lusever 17.4.2007, 14:30

Цитата(December @ 22.3.2006, 13:30

)

Паддинг влияет всегда на ширину и высоту, если указан DOCTYPE.
У меня наоборот, в IE7 не работает oferflow при 100%. А везде работает.