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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Прокручиваемый DIV в таблице, и всякие разные браузеры 
:(
    Опции темы
Plavozont
Дата 31.8.2009, 14:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Дано: 
  • Таблица растянутая на 100% по ширине и высоте
  • В таблице строки с ячейками
  • В ячейках DIV-ы растянутые на 100% по ширине и высоте
  • Содержимое DIV-ов значительно превышает разумные пределы, для сдерживания пределов overflow стоит на auto

Задача:
  • Удержать таблицу в границах "вьюпорта" т.е. чтобы у браузера не появлялись прокрутки.

Проблема:
  • Дивы расперают собой таблицу так что та даже выходит за экран (достаточно убрать из кода position:absolute) т.к. DIV упорно принимает размеры вьюпорта не понятно даже зачем.
  • position:absolute решает проблему для IE, DIV растягивается по размеру TD-шки в которой он находится но при этом на него никакие бордеры, паддинги и маргины не действуют, а в FFX DIV итого больше бесПРЕДЕЛьствует.

Код

<style>
td { border-width:1px; border-style:solid; border-color:#000000; }
table{ border-width:1px; border-style:solid; border-color:#000000; }
div { border-width:1px; border-style:solid; border-color:#000000; background-color:#00FFFF; }
</style>

<html>
<body style="margin:0px">

<table style="width:100%;height:100%;border-collapse:collapse;background-color:#CBCAB6;" >
<tr id=no1>
  <td align="center">1<br>2<br><td align="center">1<br>2<br>

<tr id=no2>
  <td align="center" width="50%" height="100%">1
  <td id=divin VALIGN="TOP" width="50%" height="100%">
  <div id=otchdiv style="position:absolute;width:100%;height:100%;overflow:auto;background-color:#99D8FD">
    <span style='white-space:nowrap'>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60</span>
    2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60
  </div>
<tr name=no3>
  <td align="center">1<br>2<br><td align="center">1<br>2<br>

</table>

</body>
</html>


Подскажите пожалуйста как объяснить DIV'у где пределы за которые ему нельзя выходить (только без position:absolute'ов если возможно)
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
nogoody
Дата 31.8.2009, 15:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Код поправь, td и tr закрывать надо

Код

<style>
td { border-width:1px; border-style:solid; border-color:#000000; }
table{ border-width:1px; border-style:solid; border-color:#000000; }
div { border-width:1px; border-style:solid; border-color:#000000; background-color:#00FFFF; }
</style>
<html>
<body style="margin:0px">
<table style="width:100%;height:100%;border-collapse:collapse;background-color:#CBCAB6;" >
<tr id=no1>
  <td align="center">1<br>2<br></td><td align="center">1<br>2<br></td>
</tr>  
<tr id=no2>
  <td align="center" width="50%" height="100%">1</td>
  <td id=divin VALIGN="TOP"  style='width:50%'>
  <div id=otchdiv style="width:50%;height:50%;overflow:auto;background-color:#99D8FD">
    <span style='white-space:nowrap'>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60</span>
    2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60
  </div>
  </td>
</tr>  
<tr name=no3>
  <td align="center">1<br>2<br></td><td align="center">1<br>2<br></td>
</tr>  
</table>
</body>
</html>


Дальше я думаю ты разберешься, overflow:auto - прекрасно работает. 


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


Бывалый
*


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

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



Работать-то он работает, мне нужно чтобы DIV просто растянулся по размеру ячейки(т.е. так как это получается при просмотре приведённого HTML кода в Internet Explorer'е) и не растягивал саму ячейку ! Самое большое что мне интересно почему DIV считает что ему нужно быть размером с окно браузера (это когда overflow не на auto) когда его растягиваешь на 100%

Это сообщение отредактировал(а) Plavozont - 31.8.2009, 17:00
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
brother79
Дата 31.8.2009, 19:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Цитата(Plavozont @  31.8.2009,  16:55 Найти цитируемый пост)
Самое большое что мне интересно почему DIV считает что ему нужно быть размером с окно браузера (это когда overflow не на auto) когда его растягиваешь на 100%


Потомучто это ie, значит не надо использовать width=100% ищи другие пути. В твоём случае див и так нормально впишется без width=100%, а фон если что можно и на столбец навесить. Можешь картинку нарисовать что ты хочешь сделать, можно будет глянуть как это лучше сверстать.


--------------------
PM MAIL WWW   Вверх
Plavozont
Дата 1.9.2009, 06:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата
В твоём случае див и так нормально впишется без width=100%


Ничё подобного, без width он растаращивает всю TD'шку.

Вот так бы оно выглядело с дивом:
user posted image

Вот так без дива:
user posted image

Вот так с двумя дивами:
user posted image

Нужно чтобы работало в IE и FireFox (а не только в IE как сейчас). Главное чтобы всё это хозяйство не выходило за экран. Ни по ширине, ни по выстое!

Это сообщение отредактировал(а) Plavozont - 1.9.2009, 06:56
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 07:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Т.е. у тебя ячейки должны скролироваться, а таблица - нет, ни по вертикали, не по горизонтали, правильно я понял?

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

Да, и по высоте - тоже важно, если таблица должна войти и высоты все процентные - то это самый простой вар-нт, если вверху и вницу - в пикселях высоты - то это немного сложнее.

Это сообщение отредактировал(а) brother79 - 1.9.2009, 07:16


--------------------
PM MAIL WWW   Вверх
Plavozont
Дата 1.9.2009, 07:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата
Т.е. у тебя ячейки должны скролироваться, а таблица - нет, ни по вертикали, не по горизонтали, правильно я понял?


В точку !

Более реально картина выглядит вот так:
user posted image

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

Это сообщение отредактировал(а) Plavozont - 1.9.2009, 07:20
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 07:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Цитата(Plavozont @  1.9.2009,  07:17 Найти цитируемый пост)
три ряда, в верхнем и нижнем кнопки управления, в среднем дивка. В дивку в innerHTML по аяксу загружаются различные отчёты немыслимых размеров, дивка растянута на 100%, сама таблица растянута на 100%, фиксированного в сущьности ничего нет, дивка должна растягиваться вместе с окном браузера. 


т.е. колонка уже одна, и по верх и низ - высота фиксированная?


--------------------
PM MAIL WWW   Вверх
Plavozont
Дата 1.9.2009, 07:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Ауч, как ты быстро !  smile 

Верхний и нижний ряд по высоте я ставлю на 1%, тогда они просто растягиваются в зависимости от содержимого.
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 07:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Короче я так понял тебе наверно это надо:

Код

<style>
    #content {
        top:100px;
        bottom:100px;
        width:100%;
        background-color:blue;
        position:absolute;
        overflow:auto;
    }
    #top {
        top:0px;
        height:100px;
        width:100%;
        position:absolute;
        background-color:red;
    }
    #bottom {
        bottom:0px;
        height:100px;
        width:100%;
        position:absolute;
        background-color:green;
    }
</style>
<html>
<body style="margin:0px">

<div id="content">
<span style='white-space:nowrap'>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60</span>
    2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60
qqq
</div>
<div id="top">
ww
</div>
<div id="bottom">
ee
</div>

</body>
</html>



--------------------
PM MAIL WWW   Вверх
Plavozont
Дата 1.9.2009, 07:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Уау, это то и есть !!!!!!!  smile   smile   smile  Спасибище большущее ! А если я книжку про цсс прочитаю я тоже так смогу ? Ты какую читал... И ещё вопрос: ты это от руки накидал так быстро или редактором пользуешься ?

Добавлено через 3 минуты и 33 секунды
И правда ведь не всё таблицами решить можно, даже не думал что дивы тоже на что-то годны! Спс ещё рас.
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 07:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Sory, в ie 7 что-то сразу не проверил, он там коряво отображается, попозже соображу как под него сделать.

Книжка мне не помогла, помогло это:

http://www.htmlbook.ru

Это сообщение отредактировал(а) brother79 - 1.9.2009, 07:44


--------------------
PM MAIL WWW   Вверх
Plavozont
Дата 1.9.2009, 08:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата
если таблица должна войти и высоты все процентные - то это самый простой вар-нт,


Конечно если не сложно покажи что за вариант ты имел ввиду, потому что в том примере у тебя всё фиксированное.
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 08:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Цитата(Plavozont @  1.9.2009,  08:13 Найти цитируемый пост)
Конечно если не сложно покажи что за вариант ты имел ввиду, потому что в том примере у тебя всё фиксированное. 


Если высоты процентные - то можно всё сделать position=absolute, и расставить высоту и ширину, при это м нормально будет и в ие и в нормальном браузере, а если фиксированная - то в ие могут быть проблемы, т.к. ты уже в блоке, который поцентру - высоту в процентах не укажешь, т.к. он будет считать от всего экрана, и блок вылазит вниз. + надо поразбираться как ие со скролингом работает, чувствую могут быть сложности, судя по тому решению, что я написал - в ие у меня скролинг вылез не туда.


--------------------
PM MAIL WWW   Вверх
Plavozont
Дата 1.9.2009, 09:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Ну да, в IE такие проблемы и есть, в 6 тоже.
--------------------
Fortunately, the circumstances under which those words are useful run out at a relatively low level of multiplicity.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




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


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

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