Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Скроллинг появляется не в ячейке, а общий, А нужно наоборот 
:(
    Опции темы
Dreamer_0x01
Дата 16.9.2010, 13:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Терминатор
**


Профиль
Группа: Участник
Сообщений: 780
Регистрация: 14.4.2005
Где: Санкт-Петербург

Репутация: нет
Всего: 12



Мне нужно сделать так, чтобы в случае невлезания страницы на экран скроллинг появлялся в зеленой ячейке (см пример), то есть само содержание таблицы чтобы было все время на экране на одной и той же позиции, без скролинга, а прокрутка превосходящей размеры ячейки была внутри.

Ячейки 1,2,5,6 должны иметь фиксированную высоту, высота зеленой ячейки вариироваться в зависимости от размеров окна броузера.
Вся страница должна четко умещаться в окне броузера без появления как нижнего, так и верхнего скролинга.

На деле получается, что у ячейки появляется незадействованный скроллинг, и при этом размер самой ячейки, а следовательно и таблицы расширяется по высоте до размеров текста. 

Что я неправильно сделал и как сделать правильно?

Вот код:
Код

<html>
<head>
<style type="text/css">
<!--
.div1 {
    background-color: #009900;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
}
-->
</style>
</head>

<body>
<table width="100%" height="100%"  border="1" align="left" cellpadding="5" cellspacing="10" bordercolor="#000000" bgcolor="#CCCCCC">
  <tr>
    <td height="120px">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td height="300px">3</td>
    <td align="center" valign="top" bgcolor="#33FF00" >
    <div class="div1">
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    </div>
    
    </td>
  <tr>
    <td height="60px">5</td>
    <td>6</td>
  </tr>

</table>

</body>
</html>




--------------------
Нет ничего невозможного. Есть цели, и есть время и силы на их достижение.
PM ICQ   Вверх
magelan
Дата 16.9.2010, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


потерял xPath
**


Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 4
Всего: 16



Боюсь Лису можно поправить только скриптом, она хочет абсолютную велечину у контейнера дива.

Остальные браузеры вас поняли правильно.
PM MAIL   Вверх
Dreamer_0x01
Дата 16.9.2010, 14:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Терминатор
**


Профиль
Группа: Участник
Сообщений: 780
Регистрация: 14.4.2005
Где: Санкт-Петербург

Репутация: нет
Всего: 12



Цитата

Остальные браузеры вас поняли правильно.


Да тоже не совсем правильно. Тестировал на Опере и ИЕ. Оба прокручивают нормально, но вот в ИЕ рисуется правый недоступный скроллбар, который хотелось бы убрать, а вот Опера рисует и правые и нижние, причем их можно еще и прокрутить на несколько пикселей, что тоже хотелось бы убрать.

Цитата

Боюсь Лису можно поправить только скриптом, она хочет абсолютную велечину у контейнера дива.

Пример скриптика не дадите? я в этом не силен.
И правильно ли я понимаю, что если в настройках Мозилы будут отключены скрипты, то страница всегда в ней будет растянута по верикали?


--------------------
Нет ничего невозможного. Есть цели, и есть время и силы на их достижение.
PM ICQ   Вверх
magelan
Дата 16.9.2010, 14:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


потерял xPath
**


Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 4
Всего: 16



Дизабленный скорлбар в ИЕ - всегда и это очень правильно, т.к. центрированные фикс сайты в нем не скачут в отличии от остальных браузеров.

Опера и Хром к 100% прибавляют дефалтовые отступы в боди, в примере ниже - они убраны.

Не расчитывайте на пользователей, у которых отключен JS, так можно дойти до HTML 1.0.
Консольные браузеры тоже до сих пор существуют и используются, но от них никто не ждет "правильного показа" страниц и картинок.

Доктайп лучше использовать, но при этом ваша страница начнет вести себя не так.

Пример скрипта кривенький, но общий ход мысли понятен:
Код

<html>
<head>
<style type="text/css">
<!--
.div1 {
    background-color: #009900;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    display: none;
}
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
-->
</style>
<script TYPE="text/javascript">
var uag = window.navigator.userAgent.toLowerCase();

browser = {
    safari: /safari/.test( uag ) && !/chrome/.test( uag ),
    chrome: /chrome/.test( uag ),
    opera: /opera/.test( uag ),
    msie: /msie/.test( uag ) && !/opera/.test( uag ),
    firefox: /firefox/.test( uag )
};
var f = function()
{
    var d1 = document.getElementById('d1');
    d1.style.display = 'none';
    if( browser.firefox )
    {
      var obj = document.getElementById('tdd');
      obj.style.height = obj.offsetHeight - 10 + 'px';
      d1.style.height = obj.offsetHeight - 20 + 'px'

    }
    d1.style.display = 'block';
    if( browser.firefox )
    {
            d1.style.height = obj.offsetHeight - 20 + 'px';
    }
}
</SCRIPT>
</head>

<body onload="f();" onresize="f();">
<table width="100%" height="100%"  border="1" align="left" cellpadding="5" cellspacing="10" bordercolor="#000000" bgcolor="#CCCCCC">
  <tr>
    <td height="120px">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td height="300px">3</td>
    <td align="center" valign="top" bgcolor="#33FF00" ID="tdd">
    <div ID="d1" class="div1">
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    <p>
    lalala
    </p>
    </div>
    </td>
  <tr>
    <td height="60px">5</td>
    <td>6</td>
  </tr>

</table>

</body>
</html>

Проблема в том, что после построения DIV таблица снова перерастягивается. Как это обмануть мне сейчас думать лень.
По хорошему - покажите дизайн (если это возможно), тогда можно будет подумать как схитрить.

Это сообщение отредактировал(а) magelan - 16.9.2010, 14:46
PM MAIL   Вверх
Dreamer_0x01
Дата 16.9.2010, 16:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Терминатор
**


Профиль
Группа: Участник
Сообщений: 780
Регистрация: 14.4.2005
Где: Санкт-Петербург

Репутация: нет
Всего: 12



Цитата

Проблема в том, что после построения DIV таблица снова перерастягивается. Как это обмануть мне сейчас думать лень.


А в чем это выражается?
Единственно не очень приятный эффект я нашел только в том, что во-первых див чуток "недотягивает" до края таблицы, а во-вторых, если изменить размер окна, то все отмасштабируется одним образом, а если после этого обновить страницу, то отмасштабируется с небольшими сдвигами.




--------------------
Нет ничего невозможного. Есть цели, и есть время и силы на их достижение.
PM ICQ   Вверх
ksnk
Дата 16.9.2010, 16:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Чтобы определится с комплектом глюков, которые предстоит фиксить, лучше определять doctype у документа. Иначе работа увеличивается в разы...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Dreamer_0x01
Дата 17.9.2010, 22:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Терминатор
**


Профиль
Группа: Участник
Сообщений: 780
Регистрация: 14.4.2005
Где: Санкт-Петербург

Репутация: нет
Всего: 12



Цитата

Чтобы определится с комплектом глюков, которые предстоит фиксить, лучше определять doctype у документа. 


Поигрался с разными doctype - без их объявления работает хоть как-то. С добавлением doctype скролинг убирается начисто, кроме того  у некоторых элементов перестают работать margin и padding.




--------------------
Нет ничего невозможного. Есть цели, и есть время и силы на их достижение.
PM ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0593 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.