Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Прокручиваемый DIV в таблице


Автор: Plavozont 31.8.2009, 14:08
Дано: 
  • Таблица растянутая на 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'ов если возможно)

Автор: nogoody 31.8.2009, 15:58
Код поправь, 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 - прекрасно работает. 

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

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


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

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


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

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

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

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

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

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

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

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

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


В точку !

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

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

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


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

Автор: Plavozont 1.9.2009, 07:21
Ауч, как ты быстро !  smile 

Верхний и нижний ряд по высоте я ставлю на 1%, тогда они просто растягиваются в зависимости от содержимого.

Автор: brother79 1.9.2009, 07:30
Короче я так понял тебе наверно это надо:

Код

<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>

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

Добавлено через 3 минуты и 33 секунды
И правда ведь не всё таблицами решить можно, даже не думал что дивы тоже на что-то годны! Спс ещё рас.

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

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

http://www.htmlbook.ru

Автор: Plavozont 1.9.2009, 08:13
Цитата
если таблица должна войти и высоты все процентные - то это самый простой вар-нт,


Конечно если не сложно покажи что за вариант ты имел ввиду, потому что в том примере у тебя всё фиксированное.

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


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

Автор: Plavozont 1.9.2009, 09:23
Ну да, в IE такие проблемы и есть, в 6 тоже.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)